/* ===== Brielo — sistema visual ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --ceu: #4A9EFF;
  --ceu-escuro: #2F7FE0;
  --noite: #0D0D1A;
  --nevoa: #EAF3FF;
  --gelo: #F7FAFF;
  --branco: #FFFFFF;
  --marco: #23B26D;
  --alerta: #F2A33C;
  --erro: #E5544B;
  --cinza: #5B6474;
  --borda: #DCE7F5;
  --radius: 18px;
  --sombra: 0 10px 30px rgba(13, 13, 26, .08);
  --display: 'Bricolage Grotesque', sans-serif;
  --corpo: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--corpo); color: var(--noite); background: var(--branco); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1,h2,h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.01em; }
a { color: inherit; }
button { font-family: var(--corpo); cursor: pointer; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- botões ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.btn-ceu { background: var(--ceu); color: #fff; box-shadow: 0 6px 18px rgba(74,158,255,.4); }
.btn-ceu:hover { background: var(--ceu-escuro); }
.btn-noite { background: var(--noite); color: #fff; }
.btn-fantasma { background: transparent; color: var(--noite); border: 2px solid var(--borda); }
.btn-fantasma:hover { border-color: var(--ceu); color: var(--ceu-escuro); }
.btn-mini { padding: 7px 14px; font-size: 13px; border-radius: 10px; }

/* ---- landing ---- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .02em; text-decoration: none; }
.nav-links { display: flex; gap: 28px; align-items: center; font-weight: 600; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--cinza); }
.nav-links a:hover { color: var(--noite); }

.hero { background: linear-gradient(180deg, var(--gelo) 0%, var(--branco) 100%); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 72px 0 88px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--nevoa); color: var(--ceu-escuro); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); font-weight: 800; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--ceu); }
.hero p.sub { font-size: 18px; color: var(--cinza); max-width: 520px; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--cinza); }

/* ---- a Rota (assinatura) ---- */
.rota { position: relative; padding-left: 34px; }
.rota::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--ceu), var(--nevoa)); }
.rota-stop { position: relative; padding: 10px 0 10px 8px; opacity: 0; transform: translateY(10px); animation: stop-in .5s ease forwards; }
.rota-stop::before { content: ''; position: absolute; left: -31px; top: 16px; width: 18px; height: 18px; border-radius: 50%; background: var(--branco); border: 4px solid var(--ceu); }
.rota-stop strong { font-family: var(--display); font-size: 16px; display: block; }
.rota-stop span { font-size: 13px; color: var(--cinza); }
@keyframes stop-in { to { opacity: 1; transform: none; } }

.sec { padding: 88px 0; }
.sec-alt { background: var(--gelo); }
.sec-noite { background: var(--noite); color: #fff; }
.sec h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; margin-bottom: 14px; }
.sec .lead { color: var(--cinza); font-size: 17px; max-width: 640px; margin-bottom: 44px; }
.sec-noite .lead { color: #AEB8CC; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--radius); padding: 26px; box-shadow: var(--sombra); }
.card h3 { font-size: 19px; margin: 12px 0 8px; }
.card p { color: var(--cinza); font-size: 14.5px; }
.chip { display: inline-block; background: var(--nevoa); color: var(--ceu-escuro); font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.sec-noite .card { background: #16162A; border-color: #26263E; }
.sec-noite .card p { color: #AEB8CC; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.footer { background: var(--noite); color: #AEB8CC; padding: 44px 0; font-size: 14px; }
.footer .logo { color: #fff; }
.footer-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---- app ---- */
.app-body { background: var(--gelo); min-height: 100vh; }
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side { background: var(--noite); color: #fff; padding: 26px 20px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.side .logo { color: #fff; margin-bottom: 6px; }
.side-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6E7893; margin: 18px 8px 6px; font-weight: 700; }
.side a.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: #C9D2E4; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.side a.nav-item:hover, .side a.nav-item.on { background: #1B1B31; color: #fff; }
.side .spacer { flex: 1; }
.user-pill { background: #16162A; border-radius: 14px; padding: 12px 14px; font-size: 13px; }
.user-pill b { display: block; font-size: 14px; }
.user-pill button { background: none; border: 0; color: var(--ceu); font-weight: 700; padding: 0; margin-top: 6px; font-size: 13px; }

.main { padding: 34px 38px; }
.main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.main-head h1 { font-size: 30px; font-weight: 800; }
.main-head .sub { color: var(--cinza); margin-top: 4px; font-size: 15px; }
.code { font-family: var(--mono); font-size: 12.5px; background: var(--nevoa); color: var(--ceu-escuro); padding: 4px 10px; border-radius: 8px; }

.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tx-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); padding: 22px; box-shadow: var(--sombra); text-decoration: none; display: block; transition: transform .15s ease; }
.tx-card:hover { transform: translateY(-3px); }
.tx-card h3 { font-size: 18px; margin: 8px 0 4px; }
.tx-card .addr { color: var(--cinza); font-size: 13.5px; margin-bottom: 14px; }
.bar { height: 8px; border-radius: 99px; background: var(--nevoa); overflow: hidden; margin: 10px 0 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ceu), var(--marco)); border-radius: 99px; }
.tx-card .meta { font-size: 12.5px; color: var(--cinza); }

.empty { background: #fff; border: 2px dashed var(--borda); border-radius: var(--radius); padding: 56px 24px; text-align: center; color: var(--cinza); }
.empty h3 { color: var(--noite); margin-bottom: 6px; }

.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--borda); margin-bottom: 24px; flex-wrap: wrap; }
.tab { border: 0; background: none; padding: 12px 16px; font-weight: 700; font-size: 14.5px; color: var(--cinza); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab.on { color: var(--ceu-escuro); border-color: var(--ceu); }

.panel { background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); padding: 26px; box-shadow: var(--sombra); }

/* rota dentro do app */
.rota-app .rota-stop { animation: none; opacity: 1; transform: none; padding: 14px 0 14px 8px; }
.rota-app .rota-stop.done::before { background: var(--marco); border-color: var(--marco); }
.rota-app .rota-stop.now::before { border-color: var(--ceu); box-shadow: 0 0 0 6px rgba(74,158,255,.18); }
.rota-app .rota-stop.todo::before { border-color: var(--borda); }
.rota-app .rota-stop .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.status-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.st-done { background: #E4F7ED; color: var(--marco); }
.st-now { background: var(--nevoa); color: var(--ceu-escuro); }
.st-todo { background: #F1F4F9; color: var(--cinza); }
.st-warn { background: #FDF1DE; color: #B47716; }
.st-err { background: #FCE8E7; color: var(--erro); }

.doc-row, .pay-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.doc-row:last-child, .pay-row:last-child { border-bottom: 0; }
.doc-row .name { font-weight: 600; font-size: 14.5px; }
.doc-row .cat { font-size: 12px; color: var(--cinza); }
select.mini, input.mini { border: 1.5px solid var(--borda); border-radius: 10px; padding: 7px 10px; font-family: var(--corpo); font-size: 13.5px; background: #fff; }

.money-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.money-box { background: var(--gelo); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; }
.money-box b { display: block; font-family: var(--display); font-size: 22px; }
.money-box span { font-size: 12.5px; color: var(--cinza); }

/* chat */
.chat { display: flex; flex-direction: column; height: 560px; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: 14.5px; }
.msg.user { align-self: flex-end; background: var(--ceu); color: #fff; border-bottom-right-radius: 6px; }
.msg.brielo { align-self: flex-start; background: var(--gelo); border: 1px solid var(--borda); border-bottom-left-radius: 6px; }
.msg.brielo .who { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; color: var(--ceu-escuro); margin-bottom: 5px; font-family: var(--display); letter-spacing: .04em; }
.chat-in { display: flex; gap: 10px; margin-top: 14px; }
.chat-in input { flex: 1; border: 2px solid var(--borda); border-radius: 999px; padding: 13px 20px; font-size: 15px; font-family: var(--corpo); }
.chat-in input:focus { border-color: var(--ceu); outline: none; }

/* modal + forms */
.modal-bg { position: fixed; inset: 0; background: rgba(13,13,26,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: #fff; border-radius: 22px; padding: 30px; width: 100%; max-width: 480px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal h2 { font-size: 22px; margin-bottom: 18px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.field input, .field select { width: 100%; border: 2px solid var(--borda); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: var(--corpo); }
.field input:focus, .field select:focus { border-color: var(--ceu); outline: none; }
.form-err { background: #FCE8E7; color: var(--erro); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; display: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* auth */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-brand { background: var(--noite); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.auth-brand h2 { font-size: 34px; margin: 24px 0 12px; }
.auth-brand p { color: #AEB8CC; max-width: 380px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 26px; margin-bottom: 22px; }
.auth-switch { margin-top: 18px; font-size: 14px; color: var(--cinza); text-align: center; }
.auth-switch a { color: var(--ceu-escuro); font-weight: 700; }

@media (max-width: 900px) {
  .hero-in, .duo, .auth-wrap { grid-template-columns: 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side .spacer { display: none; }
  .auth-brand { display: none; }
  .main { padding: 22px 18px; }
  .nav-links { display: none; }
}