/* Cred · tema "espacial" — mesmos acentos, cards (.fx / .kx / .pc) e animações das dashboards do Grafana (Zabbix novo). */
:root {
  --bg: #0B1220; --bg2: #0E1626; --pn: #101A2C; --pn2: #142036; --ln: #1C2A42; --ln2: #26385A;
  --tx: #E8F6FF; --tx2: #C5D3E0; --lb: #9BB0C4; --mu: #7C8DA0;
  --cy: #22D3EE; --pu: #9B7EDE; --gr: #00D68F; --am: #FFB020; --rd: #FF3B5C; --lc: #67E8F9;
  --r: 14px;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #ffffff40, transparent), radial-gradient(1px 1px at 72% 12%, #ffffff30, transparent),
    radial-gradient(1px 1px at 42% 62%, #ffffff28, transparent), radial-gradient(1px 1px at 88% 78%, #ffffff30, transparent),
    radial-gradient(1px 1px at 22% 88%, #ffffff22, transparent),
    radial-gradient(900px 500px at 85% -10%, #22D3EE10, transparent), radial-gradient(700px 500px at -10% 30%, #9B7EDE10, transparent);
  background-size: 420px 300px, 420px 300px, 420px 300px, 420px 300px, 420px 300px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  color: var(--tx); font: 400 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cy); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--mu); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }

/* ---------- faixa (.fx) ---------- */
.fx { --a: var(--cy); position: relative; overflow: hidden; min-height: 64px; display: flex; align-items: center; gap: 18px; padding: 12px 22px;
  border-radius: 10px; border-left: 3px solid var(--a);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 16%, transparent), #9B7EDE14 42%, rgba(11,18,32,0) 88%); }
.fx:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 16% 34%, #FFFFFF66, transparent), radial-gradient(1px 1px at 58% 20%, #FFFFFF4D, transparent),
    radial-gradient(1px 1px at 82% 68%, #FFFFFF3A, transparent), radial-gradient(1px 1px at 37% 76%, #FFFFFF2E, transparent),
    radial-gradient(1px 1px at 93% 30%, #FFFFFF33, transparent);
  background-size: 300px 210px; animation: espDeriva 90s linear infinite; }
.fx:after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, #FFFFFF14 49%, transparent 63%); transform: translateX(-55%); animation: espFeixe 11s ease-in-out infinite; }
.fx > * { position: relative; z-index: 1; }
.fx .tt { font: 800 22px/1.1 var(--font); letter-spacing: 3px; color: var(--tx); text-shadow: 0 0 18px color-mix(in srgb, var(--a) 55%, transparent); text-transform: uppercase; }
.fx .sb { font: 500 11px/1.3 var(--font); letter-spacing: 2px; text-transform: uppercase; color: var(--mu); }
.fx.sm { min-height: 44px; padding: 8px 16px; }
.fx.sm .tt { font-size: 14px; letter-spacing: 2.5px; }
@keyframes espDeriva { to { background-position: 420px 280px; } }
@keyframes espFeixe { 0%, 74% { transform: translateX(-55%); } 100% { transform: translateX(165%); } }

/* ---------- KPI (.kx) ---------- */
.kx { --a: var(--cy); position: relative; min-height: 112px; padding: 14px 16px; border-radius: var(--r); border-left: 3px solid var(--a);
  background: linear-gradient(145deg, color-mix(in srgb, var(--a) 16%, transparent) 0%, color-mix(in srgb, var(--a) 5%, transparent) 40%, rgba(11,18,32,0) 78%);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--a) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--a) 13%, transparent);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; animation: pulso 3.2s ease-in-out infinite; }
.kx .t { font: 700 10px/1.2 var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--lb); }
.kx .v { font: 800 30px/1 var(--font); color: var(--a); letter-spacing: -1px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--a) 60%, transparent), 0 0 6px color-mix(in srgb, var(--a) 33%, transparent); }
.kx .u { font: 600 11px/1 var(--font); color: var(--mu); margin-left: 6px; letter-spacing: .12em; }
.kx .s { font: 600 11px/1.3 var(--font); color: var(--mu); }
.kx .s b { color: var(--tx2); }
@keyframes pulso { 0%, 100% { box-shadow: inset 0 0 40px color-mix(in srgb, var(--a) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--a) 13%, transparent); }
  50% { box-shadow: inset 0 0 56px color-mix(in srgb, var(--a) 20%, transparent), 0 0 18px color-mix(in srgb, var(--a) 26%, transparent); } }

/* ---------- barra de percentual (.pc) ---------- */
.bar { height: 6px; border-radius: 3px; background: #152031; overflow: hidden; }
.bar .fill { --a: var(--pu); --pct: 0; position: relative; overflow: hidden; height: 100%; width: calc(min(100%, max(3%, var(--pct) * 1%)));
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 33%, transparent), var(--a)); animation: respira 2.4s ease-in-out infinite; transform-origin: left center; }
.bar .fill:after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, #FFFFFF44, transparent);
  background-size: 38% 100%; background-repeat: no-repeat; animation: escorre 2.2s linear infinite; }
@keyframes respira { 0%, 100% { opacity: .7; transform: scaleX(.94); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes escorre { from { background-position: -42% 0; } to { background-position: 142% 0; } }
.lv-warn { --a: var(--am) !important; }
.lv-crit { --a: var(--rd) !important; }
.lv-ok { --a: var(--gr) !important; }

/* ---------- painéis ---------- */
.pn { background: linear-gradient(180deg, #111C30EE, #0E1728EE); border: 1px solid var(--ln); border-radius: var(--r); padding: 16px; position: relative; }
.pn > h3, .pn-h { margin: 0 0 12px; font: 700 11px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--lb); display: flex; align-items: center; gap: 8px; }
.pn-h .right { letter-spacing: 0; text-transform: none; font-weight: 600; }
.grid { display: grid; gap: 14px; }
.g-kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.chart { width: 100%; height: 280px; }

/* ---------- botões / formulários ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ln2); background: var(--pn2); color: var(--tx);
  border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { border-color: var(--cy); box-shadow: 0 0 0 3px #22D3EE1A; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: linear-gradient(135deg, #22D3EE, #0EA5C6); color: #04131A; border-color: transparent; box-shadow: 0 0 22px #22D3EE44; }
.btn.ok { background: linear-gradient(135deg, #00D68F, #00A86F); color: #02150D; border-color: transparent; }
.btn.dng { color: var(--rd); border-color: #FF3B5C55; background: #FF3B5C12; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--lb); }
.btn.ghost:hover { color: var(--tx); border-color: var(--ln2); box-shadow: none; }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn.block { width: 100%; }
label.f { display: flex; flex-direction: column; gap: 6px; font: 700 10px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--lb); }
.in, select.in, textarea.in { width: 100%; background: #0A1322; border: 1px solid var(--ln2); border-radius: 10px; padding: 10px 12px; font: 500 15px/1.3 var(--font);
  letter-spacing: 0; text-transform: none; color: var(--tx); outline: none; transition: .15s; }
.in:focus { border-color: var(--cy); box-shadow: 0 0 0 3px #22D3EE22; }
.fgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.chk { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; }
.chk input { width: 18px; height: 18px; accent-color: var(--cy); }
input[type=color].in { padding: 4px; height: 42px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { --a: var(--cy); display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ln2);
  background: #0D1626; cursor: pointer; font-weight: 600; font-size: 13px; transition: .15s; user-select: none; }
.chip.on { border-color: var(--a); background: color-mix(in srgb, var(--a) 18%, #0D1626); box-shadow: 0 0 14px color-mix(in srgb, var(--a) 30%, transparent); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 10px/1.6 var(--font); letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid currentColor; }
.t-credito { color: var(--pu); } .t-debito { color: var(--gr); } .t-pix { color: var(--cy); } .t-dinheiro { color: var(--am); }
.st-aberta { color: var(--cy); } .st-fechada { color: var(--am); } .st-vencida { color: var(--rd); } .st-paga { color: var(--gr); }

/* ---------- lista de lançamentos ---------- */
.list { display: flex; flex-direction: column; }
.li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #1A263C; }
.li:last-child { border-bottom: 0; }
.li .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: #16223A; }
.li .d { min-width: 0; }
.li .d b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.li .d span { font-size: 12px; color: var(--mu); }
.li .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.li .v small { display: block; font-weight: 500; font-size: 11px; color: var(--mu); }
.li.click { cursor: pointer; border-radius: 10px; }
.li.click:hover { background: #ffffff06; }

table.tb { width: 100%; border-collapse: collapse; }
.tb th { text-align: left; font: 700 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--lb); padding: 10px 8px; border-bottom: 1px solid var(--ln2); }
.tb td { padding: 10px 8px; border-bottom: 1px solid #1A263C; vertical-align: middle; }
.tb tr:hover td { background: #ffffff05; }
.tb .r { text-align: right; }

/* ---------- cartão de crédito visual ---------- */
.cc { --a: var(--pu); position: relative; overflow: hidden; border-radius: 16px; padding: 16px; min-height: 178px; cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 40%, #0E1626) 0%, color-mix(in srgb, var(--a) 14%, #0E1626) 55%, #0B1220 100%);
  border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); box-shadow: 0 10px 30px #00000055, inset 0 0 50px color-mix(in srgb, var(--a) 12%, transparent);
  display: flex; flex-direction: column; gap: 10px; transition: transform .2s; }
.cc:hover { transform: translateY(-2px); }
.cc:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 36%, #FFFFFF12 49%, transparent 63%);
  transform: translateX(-60%); animation: espFeixe 9s ease-in-out infinite; }
.cc .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cc .nm { font: 800 17px/1.1 var(--font); letter-spacing: .04em; }
.cc .bk { font: 600 11px/1.3 var(--font); color: var(--lb); letter-spacing: .14em; text-transform: uppercase; }
.cc .chipx { width: 34px; height: 25px; border-radius: 6px; background: linear-gradient(135deg, #E9D8A6, #B8945A); opacity: .85; flex: none; }
.cc .amt { font: 800 26px/1 var(--font); letter-spacing: -.5px; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--a) 60%, transparent); }
.cc .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--lb); flex-wrap: wrap; }
.cc .meta b { color: var(--tx); font-weight: 700; }
.cc.off { filter: grayscale(.8); opacity: .6; }
.badge { position: absolute; top: 12px; right: 12px; z-index: 2; }
.best { background: linear-gradient(135deg, #FFB020, #FF8A00); color: #1A0E00; font: 800 10px/1 var(--font); letter-spacing: .12em; padding: 5px 8px; border-radius: 999px;
  box-shadow: 0 0 16px #FFB02066; text-transform: uppercase; }

/* ---------- insights ---------- */
.ins { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #0D1626; border-left: 3px solid var(--cy); }
.ins + .ins { margin-top: 8px; }
.ins.warn { border-left-color: var(--am); } .ins.crit { border-left-color: var(--rd); background: #FF3B5C0D; } .ins.ok { border-left-color: var(--gr); }
.ins .e { font-size: 18px; line-height: 1.2; }
.ins b { color: var(--tx); }

/* ---------- modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: #02060Dcc; backdrop-filter: blur(4px); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: linear-gradient(180deg, #121E33, #0E1728); border: 1px solid var(--ln2);
  border-radius: 18px; padding: 20px; box-shadow: 0 30px 80px #000A, 0 0 0 1px #22D3EE14; }
.modal h2 { margin: 0 0 16px; font: 800 16px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.modal .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #0F1A2D; border: 1px solid var(--ln2); border-left: 3px solid var(--cy); padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px #0008;
  font-weight: 600; animation: fade .2s; max-width: 90vw; }
.toast.err { border-left-color: var(--rd); } .toast.ok { border-left-color: var(--gr); }

/* ---------- login ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth .box { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.logo { font: 900 30px/1 var(--font); letter-spacing: 6px; text-align: center; color: var(--tx); text-shadow: 0 0 24px #22D3EE88; }
.logo span { color: var(--cy); }
.sub { text-align: center; color: var(--mu); font: 600 11px/1.4 var(--font); letter-spacing: .3em; text-transform: uppercase; }
.err { color: var(--rd); font-weight: 600; min-height: 1.2em; font-size: 13px; }

.empty { text-align: center; color: var(--mu); padding: 24px 8px; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #22D3EE33; border-top-color: var(--cy); animation: gira .8s linear infinite; margin: 30px auto; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }
.btn svg { width: 18px; height: 18px; flex: none; }

/* iPhone: sem zoom no toque duplo (teclado da maquininha) e sem zoom automático ao tocar nos campos */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
@media (pointer: coarse) {
  .in, select.in, textarea.in, .filters .in { font-size: 16px; }
}