/* Visual "Showroom": grafite e giz, vidro fosco, o laranja é a única cor. */
:root {
  color-scheme: dark;
  --g0: #070708; --g1: #0B0B0D; --g2: #121315; --g3: #26272B; --g4: #37393E;
  --giz: #F2F0EC; --cinza: #A7A9B0; --cinza-2: #74767E;
  --laranja: #FF5A1F; --laranja-luz: #FF8A55; --laranja-escuro: #D9460F; --ambar: #FFC56B;
  --verde: #7EE2A8; --verde-fundo: rgba(61,220,132,.12); --ruim: #FF7A7A; --ruim-fundo: rgba(255,90,90,.12);
  --vidro: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  --borda: rgba(255,255,255,.09); --borda-2: rgba(255,255,255,.14); --brilho: rgba(255,255,255,.16); --linha: rgba(255,255,255,.07);
  --sombra: 0 40px 80px -32px rgba(0,0,0,.85), 0 14px 30px -16px rgba(0,0,0,.6);
  --ceu-24h: linear-gradient(90deg, #0E0F11 0%, #17181B 18%, #5A3A2C 23%, #E0874F 27%, #FFC56B 31%, #ECE6DC 38%, #F2F0EC 50%, #ECE6DC 62%, #FFC56B 69%, #FF5A1F 74%, #5A2E1E 80%, #17181B 87%, #0E0F11 100%);
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --raio: 26px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; color: var(--giz); font: 400 15.5px/1.55 var(--font); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(1100px 520px at 50% -140px, rgba(255,255,255,.08), transparent 70%), linear-gradient(180deg, var(--g2) 0%, var(--g1) 40%, var(--g0) 100%);
  background-color: var(--g0); background-attachment: fixed; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--laranja-luz); outline-offset: 3px; }

.vidro, .tile, .lista, .pop, .aviso { backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%); }

/* ---------- marca ---------- */
.marca { display: flex; align-items: center; gap: 11px; font-weight: 550; font-size: 15px; white-space: nowrap; min-width: 0; }
.marca span:last-child { overflow: hidden; text-overflow: ellipsis; }
.marca-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--laranja); display: grid; place-items: center; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(255,90,31,.75); }
.marca-mark svg { width: 19px; height: 19px; }

/* ---------- luzes atrás do vidro fosco ---------- */
.palco { position: relative; isolation: isolate; }
.halo { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.halo.h1 { width: 400px; height: 400px; right: 6%; top: 0; background: radial-gradient(circle, #FF5A1F 0%, rgba(255,90,31,.55) 35%, transparent 70%); }
.halo.h2 { width: 360px; height: 260px; left: 8%; top: 40px; background: radial-gradient(circle, rgba(242,240,236,.5), transparent 70%); }
.halo.h3 { width: 300px; height: 300px; left: 42%; bottom: 0; background: radial-gradient(circle, rgba(255,197,107,.55), transparent 70%); }
.fosco { position: relative; overflow: hidden; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(64px) saturate(170%) brightness(.85); -webkit-backdrop-filter: blur(64px) saturate(170%) brightness(.85);
  border: 1px solid var(--borda-2);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -40px 80px -40px rgba(0,0,0,.35); }
.fosco::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fosco > * { position: relative; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; }
.login .palco { width: 100%; max-width: 440px; }
.login .halo.h1 { width: 320px; height: 320px; right: -40px; top: -60px; }
.login .halo.h2 { width: 260px; height: 220px; left: -40px; top: 120px; }
.login .halo.h3 { width: 240px; height: 240px; left: 30%; bottom: -60px; }
.login-caixa { display: grid; gap: 18px; padding: 40px 34px 30px; }
.login-caixa .marca-mark { width: 52px; height: 52px; border-radius: 15px; }
.login-caixa .marca-mark svg { width: 27px; height: 27px; }
.login-caixa h1 { font-size: 36px; line-height: 1.05; font-weight: 600; letter-spacing: -.045em; margin: 12px 0 0; }
.login-caixa .sub { color: var(--cinza); font-size: 16.5px; margin: -8px 0 10px; }
.rodape-login { color: var(--cinza-2); font-size: 13px; text-align: center; margin: 6px 0 0; }

/* ---------- barra de navegação ---------- */
.nav { position: sticky; top: 12px; z-index: 30; max-width: 1160px; margin: 12px auto 0; padding: 0 20px; }
.nav-in { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 8px 0 10px; border-radius: 18px;
  background: rgba(18,19,21,.62); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.nav-grupos { display: flex; gap: 2px; margin-left: 16px; }
.nav-btn { background: none; border: 0; border-radius: 10px; padding: 8px 13px; font-size: 14px; color: var(--cinza); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-btn:hover { color: var(--giz); }
.nav-btn.ativo { color: var(--giz); background: rgba(255,255,255,.08); }
.nav-btn svg { width: 10px; height: 10px; opacity: .6; transition: transform .2s; }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cont { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--laranja); color: #fff; font-size: 11px; font-weight: 600; line-height: 19px; text-align: center; letter-spacing: 0; display: inline-block; }
.spacer { flex: 1; }
.grupo { position: relative; }
.pop { position: absolute; top: calc(100% + 12px); left: -6px; min-width: 320px; background: rgba(18,19,21,.88); border: 1px solid var(--borda-2); border-radius: 18px; padding: 8px; z-index: 40;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), inset 0 1px 0 var(--brilho); transform-origin: top left; animation: abrir .16s ease-out; }
.pop.dir { left: auto; right: -6px; min-width: 240px; transform-origin: top right; }
@keyframes abrir { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.pop-item { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: none; border: 0; border-radius: 12px; padding: 11px 12px; }
.pop-item:hover { background: rgba(255,255,255,.06); }
.pop-item .t { font-size: 15px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.pop-item .d { font-size: 13px; color: var(--cinza); line-height: 1.35; margin-top: 2px; }
.pop-item.ativo .t { color: var(--laranja-luz); }
.pop-email { padding: 10px 12px 6px; font-size: 13px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--g3); font-size: 13px; font-weight: 550; letter-spacing: 0; }
.seletor { appearance: none; -webkit-appearance: none; border: 1px solid var(--borda); color: var(--giz);
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A7A9B0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 10px no-repeat;
  border-radius: 11px; padding: 7px 32px 7px 13px; font-size: 14px; font-weight: 550; max-width: 220px; }
.seletor option { background: var(--g2); color: var(--giz); }
.menu-movel { display: none; background: none; border: 0; width: 40px; height: 40px; border-radius: 50%; margin-right: -4px; }
.menu-movel span { display: block; width: 18px; height: 1.6px; background: var(--giz); margin: 5px auto; border-radius: 2px; transition: transform .25s; }
.menu-movel[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu-movel[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.folha { position: fixed; inset: 0; z-index: 29; background: rgba(7,7,8,.88); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  padding: 90px 24px 40px; overflow-y: auto; animation: descer .2s ease-out; }
@keyframes descer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.folha h4 { font-size: 13px; font-weight: 500; color: var(--cinza-2); margin: 26px 0 2px; }
.folha .pop-item { padding: 8px 0; border-radius: 0; }
.folha .pop-item .t { font-size: 26px; font-weight: 550; letter-spacing: -.035em; }
.folha .pop-item:hover { background: none; }
.folha .conta-movel { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linha); color: var(--cinza); font-size: 14px; display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
  .nav-grupos, .nav .grupo-conta { display: none; }
  .menu-movel { display: block; }
  .seletor { max-width: 150px; }
}

/* ---------- página ---------- */
main { max-width: 1160px; margin: 0 auto; padding: 48px 20px 120px; }
.cabeca { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.cabeca h1 { font-size: 42px; line-height: 1.05; font-weight: 600; letter-spacing: -.05em; margin: 0;
  background: linear-gradient(180deg, #FFFFFF 40%, #B5B2AC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cabeca p { margin: 10px 0 0; color: var(--cinza); font-size: 17px; max-width: 640px; line-height: 1.45; }
.bloco { margin-top: 48px; }
.bloco > h2, h2.sec { font-size: 20px; font-weight: 550; letter-spacing: -.03em; margin: 0 0 14px; }

.tile { position: relative; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.tile h3 { font-size: 17px; font-weight: 550; letter-spacing: -.02em; margin: 0 0 4px; }
.grade { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
.stack { display: grid; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lista { position: relative; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.linha { display: flex; gap: 14px; align-items: center; padding: 17px 24px; position: relative; }
.lista > .linha + .linha::before, .lista > details + details > summary::before { content: ''; position: absolute; top: 0; left: 24px; right: 0; height: 1px; background: var(--linha); }
.lista > details { position: relative; }
.linha.clicavel { width: 100%; border: 0; background: none; text-align: left; }
.linha.clicavel:hover { background: rgba(255,255,255,.03); }
.chev { width: 8px; height: 13px; flex: none; color: var(--cinza-2); transition: transform .2s; }
.t1 { font-weight: 500; }
.t2 { color: var(--cinza); font-size: 14px; }
.muted { color: var(--cinza); font-size: 14px; }

label.campo { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--cinza); }
input[type=text], input[type=email], input[type=password], input[type=time], input[type=search], input[type=datetime-local], textarea, select.campo-sel {
  width: 100%; background: rgba(0,0,0,.28); border: 1px solid var(--borda-2); border-radius: 12px; padding: 12px 14px; font-size: 16px; font-weight: 400; color: var(--giz);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35); transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder, textarea::placeholder { color: var(--cinza-2); }
select.campo-sel option { background: var(--g2); color: var(--giz); }
input:focus, textarea:focus, select.campo-sel:focus { outline: none; border-color: rgba(255,90,31,.7); background: rgba(0,0,0,.36); box-shadow: 0 0 0 4px rgba(255,90,31,.16), inset 0 1px 2px rgba(0,0,0,.35); }
input:disabled, textarea:disabled { color: var(--cinza); background: rgba(255,255,255,.03); box-shadow: none; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.btn { border: 0; border-radius: 12px; padding: 10px 18px; font-size: 14.5px; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s, transform .15s; white-space: nowrap; }
.btn-primario { background: var(--giz); color: var(--g0); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-primario:hover { background: #fff; }
.btn-sec { background: rgba(255,255,255,.08); color: var(--giz); border: 1px solid var(--borda-2); box-shadow: inset 0 1px 0 var(--brilho); }
.btn-sec:hover { background: rgba(255,255,255,.13); }
.btn-texto { background: none; color: var(--laranja-luz); padding: 8px 4px; }
.btn-texto:hover { text-decoration: underline; }
.btn-perigo { background: none; color: var(--ruim); padding: 8px 4px; }
.btn-perigo:hover { text-decoration: underline; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-cheio { width: 100%; padding: 14px; font-size: 16px; }

.selo { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--borda-2); color: var(--cinza); vertical-align: 1px; }
.selo.bad { border-color: rgba(255,90,31,.45); color: var(--laranja-luz); background: rgba(255,90,31,.1); }
.selo.venda { color: var(--giz); background: rgba(255,255,255,.07); }
.erro { background: var(--ruim-fundo); border: 1px solid rgba(255,90,90,.3); color: var(--ruim); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 500; }
.vazio { text-align: center; padding: 64px 24px; }
.vazio strong { display: block; font-size: 22px; font-weight: 550; letter-spacing: -.03em; margin-bottom: 6px; }
.vazio span { color: var(--cinza); }

/* controle segmentado */
.seg { display: inline-flex; flex-wrap: wrap; background: rgba(0,0,0,.28); border: 1px solid var(--borda); border-radius: 12px; padding: 3px; gap: 2px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: block; padding: 6px 13px; border-radius: 9px; font-size: 13.5px; color: var(--cinza); transition: background .15s, color .15s; cursor: pointer; }
.seg input:checked + span { background: var(--g4); color: var(--giz); font-weight: 550; box-shadow: inset 0 1px 0 var(--brilho), 0 2px 6px rgba(0,0,0,.4); }
.seg input:focus-visible + span { outline: 2px solid var(--laranja-luz); }
.seg input:disabled + span { cursor: default; }

/* interruptor */
.chave { position: relative; display: inline-block; width: 48px; height: 29px; flex: none; }
.chave input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.chave i { position: absolute; inset: 0; border-radius: 999px; background: var(--g3); border: 1px solid var(--borda-2); transition: background .2s, box-shadow .2s; }
.chave i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--giz); box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: transform .2s; }
.chave input:checked + i { background: var(--laranja); border-color: transparent; box-shadow: 0 0 16px -2px rgba(255,90,31,.7); }
.chave input:checked + i::after { transform: translateX(19px); background: #fff; }
.chave input:focus-visible + i { outline: 2px solid var(--laranja-luz); outline-offset: 2px; }
.chave input:disabled { cursor: default; }

/* ================= VISÃO GERAL ================= */
.heroi { padding: 40px 44px 34px; }
.heroi .data { color: var(--cinza-2); font-size: 14.5px; margin: 0; }
.heroi h1 { margin: 8px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--giz); }
.heroi h1 span { color: var(--cinza); font-weight: 400; }
.resumo { display: grid; grid-template-columns: 1.25fr 1fr 1fr; margin: 30px 0 0; padding: 0; list-style: none; }
.resumo li { padding: 4px 28px 0; border-left: 1px solid rgba(255,255,255,.1); min-width: 0; }
.resumo li:first-child { padding-left: 0; border-left: 0; }
.resumo b { display: block; font-weight: 600; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.05em; line-height: 1.02; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 40%, #B5B2AC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.resumo li:first-child b { font-size: clamp(46px, 6vw, 78px);
  background: linear-gradient(180deg, #FFC9A3 0%, #FF8A4C 38%, #FF5A1F 72%, #D9460F 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 10px 30px rgba(255,90,31,.3)); }
.resumo .rot { display: block; color: var(--giz); font-size: 15px; font-weight: 500; margin-top: 12px; letter-spacing: -.015em; }
.resumo .det { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--cinza); font-size: 13.5px; margin-top: 6px; }
.sobe { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--verde); background: var(--verde-fundo); }
.sobe.laranja { color: var(--laranja-luz); background: rgba(255,90,31,.14); }
.sobe.neutro { color: var(--cinza); background: rgba(255,255,255,.07); }
.extra { margin: 24px 0 0; color: var(--cinza); font-size: 14px; }
.extra strong { color: var(--giz); font-weight: 500; }
.heroi-vazio { margin: 26px 0 0; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; max-width: 22ch; }

.dia { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.dia h2 { font-size: 16px; font-weight: 500; letter-spacing: -.015em; margin: 0 0 46px; color: var(--giz); }
.dia h2 span { color: var(--cinza); font-weight: 400; }
.faixa { position: relative; height: 96px; border-radius: 16px; background: var(--ceu-24h);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(255,90,31,.35); }
.loja { position: absolute; top: -9px; bottom: -9px; border-radius: 13px; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 5px rgba(255,255,255,.05); pointer-events: none; }
.loja span, .loja-fechada { position: absolute; top: -30px; left: 0; font-size: 13px; color: var(--cinza); white-space: nowrap; }
.ponto { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; padding: 0; border: 0; border-radius: 50%; background: var(--g3); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); opacity: 0; transform: scale(.4); animation: acende .5s cubic-bezier(.2,.9,.3,1.3) forwards; transition: box-shadow .15s; }
.ponto::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.ponto.fora { background: var(--laranja); box-shadow: 0 0 0 3px rgba(255,90,31,.22), 0 0 14px rgba(255,90,31,.9); }
.ponto:hover, .ponto:focus-visible, .ponto.ativo { outline: none; z-index: 2; box-shadow: 0 0 0 3px var(--giz), 0 0 0 7px rgba(242,240,236,.25); }
.ponto.fora:hover, .ponto.fora:focus-visible, .ponto.fora.ativo { box-shadow: 0 0 0 3px var(--giz), 0 0 0 7px rgba(255,90,31,.35), 0 0 18px rgba(255,90,31,.9); }
@keyframes acende { to { opacity: 1; transform: none; } }
.agora { position: absolute; top: -14px; bottom: -14px; width: 1.5px; margin-left: -.75px; background: var(--giz); border-radius: 2px; pointer-events: none; }
.agora b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.dica { position: absolute; z-index: 5; margin-top: -16px; padding: 9px 13px 10px; border-radius: 13px; white-space: nowrap; pointer-events: none;
  background: rgba(14,15,17,.92); border: 1px solid var(--borda-2); box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: 0; transform: translate(var(--x, -50%), calc(-100% + 4px)); transition: opacity .15s, transform .15s; }
.dica.on { opacity: 1; transform: translate(var(--x, -50%), -100%); }
.dica strong { display: block; font-weight: 550; font-size: 14px; }
.dica span { color: var(--cinza); font-size: 12.5px; }
.dica span.fora { color: var(--laranja-luz); }
.horas { display: flex; justify-content: space-between; margin-top: 14px; color: var(--cinza-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; color: var(--cinza); font-size: 14px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--g3); box-shadow: 0 0 0 2px var(--giz); margin-right: 9px; }
.legenda i.fora { background: var(--laranja); box-shadow: 0 0 10px rgba(255,90,31,.9); }

.pedido { margin-top: 16px; border-radius: 20px; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 22px; flex-wrap: wrap;
  background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.pedido::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 12px var(--laranja); flex: none; margin-right: 4px; }
.pedido p { margin: 0; flex: 1; min-width: 240px; color: var(--cinza); }
.pedido p strong { color: var(--giz); font-weight: 550; }

.corpo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 40px; align-items: start; }
.topo-painel { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.topo-painel h2 { font-size: 20px; font-weight: 550; letter-spacing: -.03em; margin: 0; }
.topo-painel .muted { margin: 3px 0 0; color: var(--cinza-2); }
.recentes { margin-top: 14px; display: grid; }
.conv-min { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 14px 8px; border: 0; border-top: 1px solid var(--linha); background: none; text-align: left; width: 100%; }
.conv-min:first-child { border-top: 0; }
.conv-min:hover { background: rgba(255,255,255,.03); }
.ini { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 14px; background: var(--g3); color: var(--giz); border: 1px solid var(--borda); }
.ini.esperando { background: var(--laranja); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px rgba(255,90,31,.8); }
.conv-min .msg { color: var(--cinza); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-min .msg b { color: var(--cinza-2); font-weight: 400; }
.conv-min .hora { color: var(--cinza-2); font-size: 12.5px; text-align: right; margin-top: 5px; }
.extrato { margin: 18px 0 0; display: grid; }
.extrato div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--linha); }
.extrato dt { color: var(--cinza); font-size: 14.5px; }
.extrato dd { margin: 0; font-size: 24px; font-weight: 450; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.extrato dd.laranja { color: var(--laranja-luz); }
.poupado { margin-top: 10px; padding: 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,90,31,.22), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 var(--brilho); }
.poupado .v { font-size: 40px; font-weight: 550; line-height: 1; letter-spacing: -.05em; }
.poupado p { margin: 8px 0 0; color: var(--cinza); font-size: 14px; }

.grande { font-size: 40px; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: 22px; }
.barras .b { flex: 1; background: linear-gradient(180deg, rgba(242,240,236,.75), rgba(242,240,236,.25)); border-radius: 3px 3px 1px 1px; min-height: 2px; }
.barras .b.zero { background: rgba(255,255,255,.08); }
.barras .b.hoje { background: linear-gradient(180deg, #FFC9A3, var(--laranja)); box-shadow: 0 0 14px rgba(255,90,31,.6); }
.eixo { display: flex; justify-content: space-between; color: var(--cinza-2); font-size: 12px; margin-top: 8px; letter-spacing: 0; }
.assunto { display: grid; grid-template-columns: 130px 1fr 44px; gap: 14px; align-items: center; font-size: 14.5px; padding: 9px 0; }
.assunto:first-of-type { margin-top: 10px; }
.assunto > span:first-child::first-letter { text-transform: uppercase; }
.assunto .trilho { height: 6px; background: rgba(255,255,255,.07); border-radius: 6px; overflow: hidden; }
.assunto .trilho span { display: block; height: 100%; background: linear-gradient(90deg, rgba(242,240,236,.4), var(--giz)); border-radius: 6px; }
.assunto:first-of-type .trilho span { background: linear-gradient(90deg, var(--laranja-escuro), var(--laranja-luz)); }
.assunto .n { text-align: right; color: var(--cinza); font-variant-numeric: tabular-nums; }
.lista-interna { margin-top: 18px; border-top: 1px solid var(--linha); }
.lista-interna .linha { padding: 13px 0; }
.lista-interna .linha + .linha { border-top: 1px solid var(--linha); }

/* ---------- conversas ---------- */
details.conv > summary { list-style: none; cursor: pointer; }
details.conv > summary::-webkit-details-marker { display: none; }
details.conv > summary:hover { background: rgba(255,255,255,.03); }
details.conv[open] > summary .chev { transform: rotate(90deg); }
.conv-corpo { padding: 6px 24px 24px; display: grid; gap: 16px; }
.chat { display: grid; gap: 6px; }
.bolha { max-width: 78%; padding: 9px 14px; border-radius: 19px; white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px; }
.bolha.cli { background: rgba(255,255,255,.07); border: 1px solid var(--borda); justify-self: start; border-bottom-left-radius: 6px; }
.bolha.bot { background: linear-gradient(180deg, #FF6A2B, var(--laranja-escuro)); color: #fff; justify-self: end; border-bottom-right-radius: 6px; box-shadow: 0 8px 20px -10px rgba(255,90,31,.7); }
.bolha.equipe { background: var(--g4); border: 1px solid var(--borda-2); justify-self: end; border-bottom-right-radius: 6px; }
.bolha.sistema { background: none; border: 1px dashed var(--borda-2); color: var(--cinza); justify-self: end; border-bottom-right-radius: 6px; }
.bolha .midia { display: inline-block; font-size: 12.5px; font-weight: 550; letter-spacing: .01em; opacity: .8; margin-right: 6px; }
.bolha-rot { font-size: 11.5px; color: var(--cinza-2); margin: 10px 8px 1px; }
.bolha-rot.dir { justify-self: end; }
.bolha-rot.esq { justify-self: start; }
.dia-sep { justify-self: center; font-size: 12px; color: var(--cinza-2); margin: 16px 0 2px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.05); }

/* ---------- caixa de entrada ---------- */
.caixa { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; }
.caixa-lista { position: sticky; top: 90px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.caixa-busca { padding: 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--linha); }
.caixa-itens { overflow-y: auto; }
.caixa-item { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 0; border-top: 1px solid var(--linha); background: none; text-align: left; }
.caixa-item:first-child { border-top: 0; }
.caixa-item:hover { background: rgba(255,255,255,.03); }
.caixa-item.ativo { background: rgba(255,255,255,.08); }
.caixa-item .msg { color: var(--cinza); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caixa-item .lado { display: grid; justify-items: end; gap: 5px; font-size: 12px; color: var(--cinza-2); }
/* a conversa ocupa a altura da tela: topo e campo de resposta fixos, só as mensagens rolam */
.conversa { display: flex; flex-direction: column; height: calc(100vh - 106px); min-height: 480px; }
.conversa > .conversa-chat { flex: 1; max-height: none; min-height: 0; }
.conversa-topo { padding: 16px 22px; border-bottom: 1px solid var(--linha); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.conversa-chat { padding: 10px 22px 20px; display: grid; gap: 4px; align-content: start; overflow-y: auto; max-height: calc(100vh - 250px); min-height: 300px; }
.conversa-rodape { padding: 14px 22px; border-top: 1px solid var(--linha); color: var(--cinza); font-size: 13.5px; }
.voltar { display: none; }
.bolha.nota { background: rgba(255,197,107,.07); border: 1px dashed rgba(255,197,107,.45); justify-self: center; max-width: 88%; }
.bolha-rot.meio { justify-self: center; color: var(--ambar); }
.evento { justify-self: center; font-size: 12.5px; color: var(--cinza); margin: 10px 0 4px; text-align: center; }
.evento b { color: var(--giz); font-weight: 550; }
.bolha.enviando { opacity: .55; }
.transferir { padding: 14px 22px; border-bottom: 1px solid var(--linha); display: grid; gap: 10px; background: rgba(255,255,255,.03); }
.compositor { border-top: 1px solid var(--linha); padding: 12px 16px 12px; display: grid; gap: 10px; position: relative; }
.compositor-linha { display: flex; gap: 10px; align-items: flex-end; }
.compositor textarea { min-height: 46px; max-height: 180px; resize: none; padding: 11px 14px; }
.compositor.nota textarea { border-color: rgba(255,197,107,.55); background: rgba(255,197,107,.06); }
.compositor.nota textarea:focus { box-shadow: 0 0 0 4px rgba(255,197,107,.14); }
.compositor-opcoes { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--cinza); }
.compositor-opcoes .chave { transform: scale(.82); transform-origin: left center; margin-right: -6px; }
.rapidas { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 6px); max-height: 260px; overflow-y: auto; z-index: 6; padding: 6px;
  background: rgba(18,19,21,.97); border: 1px solid var(--borda-2); border-radius: 14px; box-shadow: 0 -20px 40px -16px rgba(0,0,0,.9), inset 0 1px 0 var(--brilho); }
.rapida { width: 100%; display: grid; gap: 2px; text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 11px; }
.rapida:hover, .rapida.ativa { background: rgba(255,255,255,.07); }
.rapida b { color: var(--laranja-luz); font-weight: 550; font-size: 14px; }
.rapida span { color: var(--cinza); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caixa-item .dono-conversa { font-size: 11.5px; color: var(--cinza); max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- OS, catálogo e ofertas ---------- */
.selo.ok { border-color: rgba(126,226,168,.4); color: var(--verde); background: var(--verde-fundo); }
.precos { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--cinza); margin-top: 6px; }
.precos b { color: var(--giz); font-weight: 550; font-variant-numeric: tabular-nums; }
.riscado { text-decoration: line-through; color: var(--cinza-2); }
.arquivo { position: relative; overflow: hidden; }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rolagem { overflow-x: auto; }
.tabela-previa { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-previa th, .tabela-previa td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--linha); white-space: nowrap; }
.tabela-previa th { color: var(--cinza); font-weight: 500; border-top: 0; }
.numeros { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.numeros b { display: block; font-size: 30px; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.numeros span { color: var(--cinza); font-size: 14px; }
.numeros .laranja b { color: var(--laranja-luz); }
.extrato.semana { grid-template-columns: 1fr 1fr; column-gap: 36px; }
.extrato dd small { display: block; font-size: 13px; color: var(--cinza); letter-spacing: 0; text-align: right; }

/* ---------- horários ---------- */
.dia-sem { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 72px; }
.dia-horas { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.dia-horas input { width: 118px; text-align: center; }

/* ---------- personalidade ---------- */
.perso { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.opcao { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.opcao .seg { justify-self: start; }
.previa-tile { position: sticky; top: 90px; border-radius: var(--raio); padding: 28px; border: 1px solid rgba(255,120,60,.25);
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,90,31,.18), transparent 60%), rgba(14,15,17,.7);
  box-shadow: var(--sombra), inset 0 1px 0 var(--brilho); }
.previa-tile h3 { font-size: 17px; font-weight: 550; margin: 0 0 6px; }
.previa { white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; margin: 20px 0; color: var(--giz); }

.aviso { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: rgba(18,19,21,.9); border: 1px solid var(--borda-2); color: var(--giz); padding: 13px 22px; border-radius: 14px; font-size: 14.5px; font-weight: 500; z-index: 50; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 20px 40px -12px rgba(0,0,0,.9), inset 0 1px 0 var(--brilho); animation: subir .25s ease-out; }
.aviso::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 10px; vertical-align: 1px; }
.aviso.ruim { border-color: rgba(255,90,90,.35); }
.aviso.ruim::before { background: var(--ruim); }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.carregando { padding: 80px 0; text-align: center; color: var(--cinza); }

@media (max-width: 900px) {
  main { padding: 30px 16px 96px; }
  .nav { padding: 0 16px; }
  .grade, .perso, .corpo { grid-template-columns: 1fr; }
  .cabeca { margin-bottom: 26px; }
  .cabeca h1 { font-size: 34px; }
  .cabeca p { font-size: 16px; }
  .bloco { margin-top: 40px; }
  .tile { padding: 22px; }
  .linha { padding: 16px 18px; }
  .lista > .linha + .linha::before, .lista > details + details > summary::before { left: 18px; }
  .conv-corpo { padding: 6px 18px 20px; }
  .opcao { grid-template-columns: 1fr; gap: 10px; }
  .previa-tile { position: static; }
  .assunto { grid-template-columns: 96px 1fr 36px; }
  .bolha { max-width: 88%; }
  .dia-sem { grid-template-columns: 1fr; }
  .dia-horas { justify-content: flex-start; }
  .dia-horas input { flex: 1; width: auto; min-width: 0; }
  .dia-horas .fechado { display: none; }
  .extrato.semana { grid-template-columns: 1fr; }
  /* caixa de entrada no celular: lista ou conversa, uma de cada vez */
  .caixa { grid-template-columns: 1fr; }
  .caixa-lista { position: static; max-height: none; }
  .caixa.com-conversa .caixa-lista, .caixa:not(.com-conversa) .conversa { display: none; }
  .voltar { display: inline-flex; }
  .conversa { height: calc(100dvh - 96px); min-height: 420px; }
  .conversa-chat { padding: 10px 14px 18px; }
  .conversa-topo .btn { padding: 8px 12px; font-size: 13.5px; }
  .conversa-topo, .conversa-rodape { padding-left: 16px; padding-right: 16px; }
  .fosco { border-radius: 24px; }
  .heroi { padding: 28px 22px 26px; }
  .halo.h1 { width: 260px; height: 260px; right: 0; }
  .halo.h2 { width: 220px; height: 200px; left: 0; }
  .halo.h3 { width: 220px; height: 220px; left: 30%; }
  .resumo { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .resumo li { padding: 0 0 0 18px; }
  .resumo li:first-child { grid-column: 1 / -1; padding: 0; }
  .resumo li:nth-child(2) { padding-left: 0; border-left: 0; }
  .resumo b { font-size: 34px; }
  .resumo li:first-child b { font-size: 52px; }
  .faixa { height: 74px; }
  .dia h2 { margin-bottom: 42px; }
  .login-caixa { padding: 32px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .ponto { opacity: 1; transform: none; } }

/* ---------- CRM: ficha do cliente, Meu dia e Funil ---------- */
.ficha-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(7,7,8,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: flex-end; }
.ficha { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--g2); border-left: 1px solid var(--borda); box-shadow: var(--sombra); overscroll-behavior: contain; }
.ficha .carregando { padding: 60px 24px; }
.ficha-topo { position: sticky; top: 0; z-index: 1; display: flex; gap: 12px; align-items: center; padding: 16px 22px; background: rgba(18,19,21,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--linha); }
.ficha-topo .t2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-corpo { padding: 18px 22px 40px; display: grid; gap: 26px; }
.ficha-corpo section { display: grid; gap: 10px; }
.ficha-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.ficha-titulo h3 { font-size: 16px; font-weight: 550; margin: 0; }
.ficha .muted { margin: 0; font-size: 14px; }
.op { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--borda); border-radius: 16px; background: rgba(255,255,255,.03); }
.op .etapas { justify-self: start; }
.op input.valor-op { width: 140px; flex: none; }
.form-crm { padding: 14px; border: 1px dashed var(--borda-2); border-radius: 14px; }
.campo > span { font-size: 14px; font-weight: 500; color: var(--cinza); }
.campo .seg { justify-self: start; }
div.campo { display: grid; gap: 8px; }
.tarefa { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.tarefa > span { display: grid; gap: 2px; }
.tarefa input:checked + span .t1 { text-decoration: line-through; color: var(--cinza-2); }
.tarefa.atrasada .t2, .t2.atraso { color: var(--laranja-luz); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--laranja); flex: none; margin-top: 2px; }
.nota-curta, .msg-curta { font-size: 14.5px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.nota-curta { border-left: 3px solid var(--ambar); }
.msg-curta.cli { background: rgba(255,255,255,.07); }
.linha-curta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14.5px; padding: 4px 0; }
.linha-curta > span:first-child { flex: 1; min-width: 160px; }
.resumo-ia { padding: 18px; white-space: pre-wrap; font-size: 14.5px; }
.item-dia .check { margin: 0; }
.clicavel { border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.clicavel:hover { background: rgba(255,255,255,.03); }
.grade-dia { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; align-items: start; }
.grade-dia h2 { font-size: 20px; font-weight: 550; letter-spacing: -.03em; margin: 0 0 14px; }
.grade-dia section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proximas { margin-top: 14px; }
.proximas > summary { cursor: pointer; color: var(--cinza); font-size: 14px; margin-bottom: 10px; }
.funil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.coluna { display: grid; gap: 10px; padding: 12px; border-radius: 20px; background: rgba(0,0,0,.22); border: 1px solid var(--borda); }
.coluna-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 4px; }
.coluna-topo h3 { font-size: 15px; font-weight: 550; margin: 0; }
.coluna-topo .muted { font-size: 13px; }
.coluna-vazia { font-size: 13.5px; padding: 6px 4px; margin: 0; }
.cartao-op { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borda); background: var(--vidro); box-shadow: inset 0 1px 0 var(--brilho); transition: border-color .15s, transform .15s; }
.cartao-op:hover { border-color: var(--borda-2); transform: translateY(-1px); }
.cartao-op .t2 { font-size: 13px; }
.rodape-op { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rodape-op b { font-size: 14px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.so-celular { display: none !important; }
.fechadas > summary { list-style: none; cursor: pointer; justify-content: space-between; }
.fechadas > summary::-webkit-details-marker { display: none; }
.fechadas .linha + .linha, .fechadas summary + .linha { border-top: 1px solid var(--linha); }
@media (max-width: 900px) {
  .ficha { border-left: 0; }
  .ficha-topo { padding: 12px 16px; }
  .ficha-corpo { padding: 16px 16px 40px; }
  .grade-dia { grid-template-columns: 1fr; }
  .so-celular { display: inline-flex !important; }
  .etapa-celular { margin-bottom: 14px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .etapa-celular span { white-space: nowrap; }
  .numeros.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .numeros.duas b { font-size: 24px; }
  .numeros.duas span { font-size: 13px; }
  .funil { grid-template-columns: 1fr; }
  .coluna { display: none; }
  .coluna.ativa { display: grid; }
  .coluna-topo { display: none; }
  .op .row .btn { flex: 1; }
  .op input.valor-op { width: 100%; flex: 1 1 100%; }
}