:root{
  --pet:#133143; --pet2:#1D4560; --our:#EED7AC; --our2:#DCBD86; --fundo:#F8F8F8;
  --tx:#1E2B35; --cz:#6F7C88; --ln:#ECE6DA; --neg:#B4413C; --pos:#2E7D5B;
  --serif:'Playfair Display',Georgia,serif; --sans:'Poppins','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--fundo); color:var(--tx); font-family:var(--sans); font-size:15px; -webkit-font-smoothing:antialiased}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; color:var(--pet)}
.carregando{display:grid; place-items:center; min-height:100vh; color:var(--cz)}

/* login */
.login{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--pet)}
.login__box{width:100%; max-width:380px; background:#fff; border-radius:18px; padding:32px 28px}
.login__box img{width:48px; height:48px; border-radius:12px; display:block}
.login__box h1{font-size:26px; margin:18px 0 4px}
.login__box p{color:var(--cz); margin:0 0 22px; font-size:14px}
.campo{display:block; margin-bottom:14px}
.campo span{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cz); margin-bottom:6px}
.campo input,.campo select{width:100%; padding:12px 14px; border:1px solid #DDD5C5; border-radius:10px; background:#fff; outline:none}
.campo input:focus,.campo select:focus{border-color:var(--pet); box-shadow:0 0 0 3px rgba(19,49,67,.12)}
.bt{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; padding:12px 18px; font-weight:600; background:var(--pet); color:var(--our)}
.bt--our{background:var(--our2); color:var(--pet)}
.bt svg{width:18px; height:18px; flex:none}
.bt--lin{background:#fff; color:var(--pet); border:1px solid var(--pet)}
.bt--bloco{width:100%}
.bt:disabled{opacity:.6; cursor:default}
.erro{color:var(--neg); font-size:13px; min-height:18px; margin:4px 0 10px}

/* layout */
.casca{display:flex; min-height:100vh}
.lateral{width:236px; flex:none; background:var(--pet); color:#C9D5DE; padding:22px 16px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#2C5470 transparent}
.marca{display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:22px}
.marca img{width:28px; height:28px; border-radius:8px}
.marca b{font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.15}
.nav{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; color:#C9D5DE; text-decoration:none; font-size:14px}
.nav svg{width:18px; height:18px; flex:none}
.nav.on{background:rgba(238,215,172,.14); color:var(--our); font-weight:600}
.nav:hover{color:#fff}
.lateral .bt--our{margin:14px 0 10px}
.lateral__pe{margin-top:auto; font-size:13px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px}
.lateral__pe b{display:block; color:#fff; font-weight:500}
.lateral__pe a,.lateral__pe button{color:var(--our2); background:none; border:0; padding:0; font-size:13px; text-decoration:none; display:block; margin-top:6px}
.principal{flex:1; min-width:0; padding:28px 36px 60px}
.topo{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.topo small{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--our2); font-weight:600; margin-bottom:4px}
.topo h1{font-size:30px}
.mes-sel{padding:9px 12px; border:1px solid #DDD5C5; border-radius:10px; background:#fff}

/* cards */
.grade{display:grid; gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1.3fr 1fr}
.card{background:#fff; border:1px solid var(--ln); border-radius:14px; padding:18px 20px}
.card--pet{background:var(--pet); border-color:var(--pet); color:#fff}
.card--our{background:#FBF4E6; border-color:var(--our)}
.rot{display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cz); font-weight:500; margin-bottom:6px}
.card--pet .rot{color:var(--our2)}
.valor{display:block; font-size:26px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.valor--g{font-size:36px}
.valor.pos{color:var(--pos)} .valor.neg{color:var(--neg)}
.card--pet .valor.pos{color:var(--our)} .card--pet .valor.neg{color:#F2A6A2}
.sub{font-size:13px; color:var(--cz); margin-top:4px}
.card--pet .sub{color:#B9C8D3}
.card h3{font-size:18px; margin-bottom:12px}
.barra{height:7px; background:#EEF0F2; border-radius:4px; overflow:hidden; margin-top:8px}
.barra i{display:block; height:100%; background:var(--our2); border-radius:4px}
.barra i.x{background:var(--pet)} .barra i.alto{background:var(--neg)}
.linha{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #F1ECE3; font-size:14px}
.linha:last-child{border-bottom:0}
.linha b{font-weight:500}
.linha small{display:block; color:var(--cz); font-size:12.5px}
.linha em{font-style:normal; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.vazio{color:var(--cz); font-size:14px; padding:10px 0}
.aviso{display:flex; gap:10px; align-items:flex-start; font-size:14px; padding:6px 0}
.aviso i{width:8px; height:8px; border-radius:50%; background:var(--our2); margin-top:6px; flex:none}
.aviso i.alto{background:var(--neg)}
.sub-lista .linha{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:12px}
.sub-lista .cab{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cz)}
.dir{text-align:right}
.dia{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cz); font-weight:600; margin:18px 0 2px}
.apagar{border:0; background:none; color:var(--cz); padding:6px; border-radius:6px; margin-left:6px}
.apagar:hover{color:var(--neg); background:#F8E5E4}
.apagar svg{width:16px; height:16px; display:block}

/* lançar */
.modal{position:fixed; inset:0; background:rgba(12,24,33,.55); display:grid; place-items:center; padding:16px; z-index:20}
.modal__box{width:100%; max-width:460px; max-height:94vh; overflow-y:auto; background:#fff; border-radius:18px; padding:24px}
.modal__box h2{font-size:22px; margin-bottom:16px}
.valor-in{font-size:30px; font-weight:600; text-align:center; padding:14px!important}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.chip{border:1px solid #DDD5C5; background:#fff; border-radius:20px; padding:6px 12px; font-size:13.5px}
.chip.on{background:var(--pet); color:var(--our); border-color:var(--pet)}
.acoes{display:flex; gap:10px; margin-top:6px}
.acoes .bt{flex:1}

#toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--pet); color:var(--our); padding:12px 18px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:.25s; z-index:30}
#toast.on{opacity:1; transform:translateX(-50%)}

/* celular */
.abas{display:none}
@media (max-width:900px){
  .lateral{display:none}
  .principal{padding:18px 16px 96px}
  .topo h1{font-size:24px}
  .g4{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
  .valor{font-size:20px} .valor--g{font-size:30px}
  .sub-lista .linha{grid-template-columns:1.3fr 1fr 1fr}
  .sub-lista .falta{display:none}
  .abas{display:flex; position:fixed; left:0; right:0; bottom:0; height:68px; background:#fff; border-top:1px solid var(--ln); justify-content:space-around; align-items:center; padding-bottom:env(safe-area-inset-bottom); z-index:10}
  .abas a,.abas button{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--cz); text-decoration:none; background:none; border:0}
  .abas svg{width:22px; height:22px}
  .abas .on{color:var(--pet); font-weight:600}
  .abas .mais{width:50px; height:50px; border-radius:50%; background:var(--our2); color:var(--pet); display:grid; place-items:center; margin-top:-24px; box-shadow:0 0 0 5px #fff}
}

/* gestão */
.papel{display:block; font-size:12px; color:var(--our2); margin-top:2px}
.faixa-ver{background:#FBF4E6; border:1px solid var(--our); border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.faixa-ver button,.link{background:none; border:0; color:var(--pet); font-weight:600; text-decoration:underline; padding:0}
.card-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.card-cab h3{margin:0}
.tabela-rola{overflow-x:auto}
.tabela{width:100%; border-collapse:collapse; font-size:14px; min-width:720px}
.tabela th{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cz); font-weight:500; text-align:left; padding:10px 8px; border-bottom:1px solid var(--ln)}
.tabela td{padding:12px 8px; border-bottom:1px solid #F1ECE3; vertical-align:middle}
.tabela td small{display:block; color:var(--cz); font-size:12.5px}
.tabela td a{color:var(--pet); font-weight:500}
.tabela tr.bloq td{opacity:.55}
.acoes-u{text-align:right}
.acoes-u button{margin:2px 0 2px 4px; white-space:nowrap}
.acoes-u button{border:1px solid #DDD5C5; background:#fff; border-radius:8px; padding:5px 10px; font-size:12.5px; margin-left:4px}
.acoes-u button:hover{border-color:var(--pet)}
.acoes-u .perigo{color:var(--neg)}
.acoes-u .perigo:hover{border-color:var(--neg)}
.pill{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:10px; background:#EEF1F4; color:var(--pet)}
.pill.p-master{background:var(--pet); color:var(--our)}
.pill.p-mentora{background:#E9D8B4; color:var(--pet)}
.pill.p-tecnico{background:#E6EEF4; color:var(--pet2)}
.pill.p-mentorada{background:#FBF4E6; color:#8A6A2E}
.pill.p-bloq{background:#F8E5E4; color:var(--neg)}
.senha-prov{font-family:ui-monospace,Consolas,monospace; font-size:17px; letter-spacing:.06em; color:var(--pet)}

/* sonhos, desejos, ferramentas, painel */
.g3{grid-template-columns:repeat(3,1fr)}
.bt--p{padding:8px 14px; font-size:13.5px}
.sonhos{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.sonho{position:relative; background:#fff; border:1px solid var(--ln); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.sonho__foto{aspect-ratio:4/5; background:#EFE8DA; display:grid; place-items:center; color:var(--cz); font-size:13px; overflow:hidden}
.sonho__foto.editavel{cursor:pointer}
.sonho__foto.editavel:hover{outline:2px solid var(--our2); outline-offset:-2px}
.sonho__foto img{width:100%; height:100%; object-fit:cover; display:block}
.sonho__corpo{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.sonho__corpo small{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--our2); font-weight:600}
.sonho__corpo b{font-family:var(--serif); font-size:18px; color:var(--pet); font-weight:600}
.sonho__v{font-size:14px; margin-top:6px}
.sonho__v span{font-weight:600; color:var(--pet)}
.sonho__corpo .bt{margin-top:auto; align-self:flex-start}
.sonho__corpo .sub + .bt{margin-top:10px}
.prio{font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:10px; white-space:nowrap}
.prio.p1{background:#F8E5E4; color:var(--neg)} .prio.p2{background:#FBF4E6; color:#8A6A2E} .prio.p3{background:#E6EEF4; color:var(--pet2)} .prio.p4{background:#EEF1F4; color:var(--cz)}
.dias{display:grid; grid-template-columns:repeat(8,1fr); gap:6px}
.dias span{aspect-ratio:1; display:grid; place-items:center; border-radius:8px; border:1px solid #E1DACB; font-size:13px; color:var(--cz)}
.dias span.on{background:var(--pet); border-color:var(--pet); color:var(--our); font-weight:600}
.perigo{color:var(--neg)!important; border-color:#E8B9B6!important}
.painel-barras{display:flex; align-items:flex-end; gap:8px; height:190px; padding-top:10px}
.pb{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%}
.pb__b{flex:1; width:100%; display:flex; align-items:flex-end; gap:2px}
.pb__b i{flex:1; border-radius:3px 3px 0 0; min-height:1px}
.pb__b i.e{background:var(--our2)} .pb__b i.s{background:var(--pet)}
.pb span{font-size:11.5px; color:var(--cz)}
.legenda{display:flex; gap:16px; font-size:13px; color:var(--cz); margin-top:10px}
.legenda i,.ponto{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.rosca{width:150px; height:150px; border-radius:50%; position:relative; flex:none}
.rosca::after{content:""; position:absolute; inset:34px; border-radius:50%; background:#fff}
.menu-mais{display:flex; flex-direction:column}
.menu-i{display:flex; align-items:center; gap:12px; padding:14px 6px; border:0; border-bottom:1px solid #F1ECE3; background:none; color:var(--pet); text-decoration:none; font-size:15px; text-align:left}
.menu-i svg{width:20px; height:20px}
@media (max-width:1200px){ .sonhos{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .sonhos{grid-template-columns:1fr 1fr; gap:10px} .g3{grid-template-columns:1fr} .sonho__corpo b{font-size:15px} .painel-barras{height:150px; gap:4px} }
.valor{white-space:nowrap}

/* mês: entradas e contas */
.item{display:grid!important; grid-template-columns:1.4fr 1fr auto; gap:12px; align-items:center}
.item.modelo{opacity:.55}
.item__v{text-align:right; font-size:13.5px; line-height:1.45}
.item__a{display:flex; align-items:center; gap:2px}
.chk{border:1px solid #DDD5C5; background:#fff; border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600; color:var(--pet); min-width:84px}
.chk.on{background:var(--pet); border-color:var(--pet); color:var(--our)}
.contas{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.contas .card:first-child{grid-column:1 / -1}
.link-v{background:none; border:0; border-bottom:1px dashed var(--our2); padding:0; font-weight:500; color:var(--pet)}
.faixa-copiar{margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px dashed var(--our2); border-radius:12px; padding:12px 16px; font-size:14px}
@media (max-width:900px){ .contas{grid-template-columns:1fr} .item{grid-template-columns:1fr auto} .item__v{grid-column:2; grid-row:1} .item__a{grid-column:1 / -1; justify-content:flex-end} }

/* alertas, recado, acompanhamento, verificação */
.tg{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #F1ECE3; cursor:pointer}
.tg small{display:block; color:var(--cz); font-size:12.5px}
.tg b{font-weight:500}
.tg input{position:absolute; opacity:0; pointer-events:none}
.tg .sw{width:40px; height:23px; border-radius:12px; background:#D5D9DE; position:relative; flex:none; transition:.2s}
.tg .sw::after{content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:.2s}
.tg input:checked + .sw{background:var(--pet)}
.tg input:checked + .sw::after{left:20px; background:var(--our)}
.neg-t{color:var(--neg)!important; font-size:12px}
.recado{background:#FBF4E6; border:1px solid var(--our); border-left:4px solid var(--our2); border-radius:12px; padding:14px 18px; margin-bottom:16px}
.recado p{margin:4px 0 2px; font-size:15px}
.recado small{color:var(--cz)}
.pk-mini{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:var(--cz); margin:4px 0 12px}
.pk-mini b{color:var(--pet); font-size:16px}
.sm{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600}
.sm::before{content:""; width:9px; height:9px; border-radius:50%}
.sm.v::before{background:#3E9B6E} .sm.a::before{background:#D9A441} .sm.x::before{background:var(--neg)} .sm.c::before{background:#B8BEC5}
.verif{border-bottom:1px solid #F1ECE3; padding:8px 0}
.verif summary{cursor:pointer; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; list-style:none}
.verif .aviso{font-size:13px; padding-left:6px}
textarea{width:100%; padding:12px 14px; border:1px solid #DDD5C5; border-radius:10px; font:inherit; resize:vertical}
.resumo-ia{white-space:pre-wrap; background:var(--fundo); border:1px solid var(--ln); border-radius:10px; padding:12px 14px; font-size:14px; margin-bottom:12px}
.tabela td.r,.tabela th.r{text-align:right}

/* menu inferior fixo, rente ao fim da tela */
html,body{overscroll-behavior-y:none}
.casca{min-height:100dvh}
@media (max-width:900px){
  .principal{padding:16px 16px calc(64px + env(safe-area-inset-bottom) * .45)}
  .abas{position:fixed; left:0; right:0; bottom:0; height:auto; margin:0; padding:5px 4px max(5px, calc(env(safe-area-inset-bottom) * .45));
    align-items:center; transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform; box-shadow:0 -1px 0 var(--ln)}
  .abas a,.abas button{flex:1; padding:3px 0; gap:1px; font-size:10.5px; line-height:1.2}
  .abas svg{width:21px; height:21px}
  .abas .mais{width:42px; height:42px; margin:0; box-shadow:none}
  .abas .mais svg{width:20px; height:20px}
}

/* seletor pessoal / empresa */
.contas-sel{display:inline-flex; background:#fff; border:1px solid var(--ln); border-radius:10px; padding:3px; margin-bottom:14px}
.contas-sel button{border:0; background:none; padding:7px 16px; border-radius:8px; font-weight:600; font-size:13.5px; color:var(--cz)}
.contas-sel button.on{background:var(--pet); color:var(--our)}

/* capa: uma foto sua */
.capa-rota{display:flex; align-items:center; gap:18px; background:var(--pet); color:#fff; border-radius:16px; padding:18px 22px; margin-bottom:16px}
.capa-rota__foto{width:84px; height:105px; border-radius:14px; flex:none; overflow:hidden; background:rgba(238,215,172,.14); border:2px solid var(--our2); display:grid; place-items:center; color:var(--our); font-size:11.5px; text-align:center; line-height:1.2}
.capa-rota__foto.editavel{cursor:pointer}
.capa-rota__foto img{width:100%; height:100%; object-fit:cover}
.capa-rota__txt small{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--our2); font-weight:600}
.capa-rota__txt b{font-family:var(--serif); font-size:24px; font-weight:600; color:#fff; line-height:1.2}
.capa-rota__acoes{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px}
.capa-rota__acoes .link{white-space:nowrap}
.capa-rota .link{color:var(--our); font-size:13px}
@media (max-width:900px){ .capa-rota{padding:14px 16px; gap:14px} .capa-rota__foto{width:68px; height:85px} .capa-rota__txt b{font-size:19px} }

/* crenças e hábitos */
.cren-lista{display:grid; gap:10px}
.cren{border:1px solid var(--ln); border-radius:12px; padding:12px 14px; background:#fff}
.cren.sim{border-color:var(--our2); background:#FFFBF3}
.cren.nao{opacity:.75}
.cren__t{margin:0 0 10px; font-weight:500; line-height:1.4}
.cren__bt{display:flex; gap:8px; flex-wrap:wrap}
.cren__bt button{border:1px solid #DDD5C5; background:#fff; border-radius:20px; padding:6px 14px; font-size:13px; font-weight:500}
.cren__bt button.on{background:var(--pet); border-color:var(--pet); color:var(--our)}
.cren__bt button:disabled{cursor:default}
.cren__txt{margin-top:12px}
.cren__txt textarea,.campo textarea{width:100%; padding:10px 12px; border:1px solid #DDD5C5; border-radius:10px; background:#fff; font:inherit; resize:vertical; outline:none}
.cren__txt textarea:focus{border-color:var(--pet)}
.cren__txt .campo:last-child{margin-bottom:0}
.valor small{font-size:13px; font-family:var(--sans)}

/* roda do dinheiro */
.radar{width:100%; max-width:480px; display:block; margin:0 auto}
.rd-anel{fill:none; stroke:#ECE6DA; stroke-width:1}
.rd-anel.f{stroke:#DDD5C5}
.rd-eixo{stroke:#ECE6DA; stroke-width:1}
.rd-atual{fill:rgba(220,189,134,.38); stroke:#B8955A; stroke-width:2; stroke-linejoin:round}
.rd-ant{fill:rgba(111,124,136,.08); stroke:var(--cz); stroke-width:1.5; stroke-dasharray:4 3}
.rd-pt{fill:var(--pet)}
.rd-rot{font-size:12.5px; fill:var(--tx); font-family:var(--sans)}
.rd-bloco{margin-top:12px}
.rd-bloco>.rot{display:block; margin-bottom:2px}
.rd-area{padding:8px 0; border-bottom:1px solid #F1ECE3}
.rd-area:last-child{border-bottom:0}
.rd-area__cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px}
.rd-area__cab b{font-weight:500; flex:1; min-width:140px}
.rd-nota{font-weight:700; font-variant-numeric:tabular-nums; min-width:18px; text-align:right}
.rd-area input[type=range]{width:100%; accent-color:var(--pet); margin:8px 0 2px}
.rd-area input[type=range].vazio{opacity:.35}
.pill.cl-ruim{background:#F8E5E4; color:var(--neg)}
.pill.cl-bacana{background:#FBF4E6; color:#8A6A2E}
.pill.cl-top{background:#E4F2EA; color:var(--pos)}
.evol{font-size:12px; color:var(--cz)}
.evol.sobe{color:var(--pos)} .evol.sobe::before{content:"▲ "}
.evol.desce{color:var(--neg)} .evol.desce::before{content:"▼ "}
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.chips .rot{width:100%}
.chip{border:1px solid #DDD5C5; background:#fff; border-radius:20px; padding:5px 12px; font-size:13px}
.chip.on{background:var(--pet); border-color:var(--pet); color:var(--our)}
.cren-res{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center}
.cren-res .valor{display:block; font-size:24px}
.cren-res .valor small{font-size:13px; color:var(--cz); font-weight:500}
.cren-res .rot{margin:4px 0 0; font-size:10.5px; letter-spacing:.06em}

/* ajuste de foto 4:5 */
.foto-ajuste{position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; gap:5px; border:0; border-radius:16px; padding:5px 11px 5px 9px; font-size:12px; font-weight:600; background:rgba(19,49,67,.78); color:#fff; backdrop-filter:blur(4px)}
.foto-ajuste svg{width:14px; height:14px}
.corte__quadro{position:relative; width:min(100%, 300px); aspect-ratio:4/5; margin:0 auto; overflow:hidden; border-radius:12px; background:#0E1E28; touch-action:none; cursor:grab; user-select:none}
.corte__quadro:active{cursor:grabbing}
.corte__quadro img{position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; pointer-events:none}
.corte__quadro::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px; box-shadow:inset 0 0 0 2px rgba(238,215,172,.7);
  background:linear-gradient(to right, transparent calc(33.3% - .5px), rgba(255,255,255,.35) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.35) 66.6%, transparent calc(66.6% + .5px)),
             linear-gradient(to bottom, transparent calc(33.3% - .5px), rgba(255,255,255,.35) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.35) 66.6%, transparent calc(66.6% + .5px))}
.corte__zoom{display:flex; align-items:center; gap:10px; margin:14px auto 16px; max-width:300px; color:var(--cz); font-weight:600}
.corte__zoom input{flex:1; accent-color:var(--pet)}

/* mensagens da Carol */
.badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:auto; border-radius:9px; background:var(--our2); color:var(--pet); font-size:11px; font-style:normal; font-weight:700}
.menu-i .badge{margin-left:8px}
.ponto-novo{position:absolute; top:6px; right:calc(50% - 16px); width:9px; height:9px; border-radius:50%; background:var(--neg); border:2px solid #fff}
.abas button{position:relative}
.aviso-mural{display:flex; align-items:center; gap:12px; background:#FFF6E6; border:1px solid var(--our2); color:var(--pet); border-radius:14px; padding:12px 16px; margin-bottom:14px; text-decoration:none}
.aviso-mural svg{width:26px; height:26px; flex:none}
.aviso-mural b{display:block; font-size:14.5px}
.aviso-mural span{font-size:12.5px; color:var(--cz)}
.mural-lista{display:grid; gap:14px; margin-top:16px}
#fMural textarea{width:100%}
.mural-bts{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 8px}
.mural-bts .bt{cursor:pointer}
.mural-bts .gravando{background:var(--neg); color:#fff; border-color:var(--neg)}
.anexos-novos{display:grid; gap:8px; margin-bottom:8px}
.anx{display:flex; align-items:center; gap:10px; border:1px solid var(--ln); border-radius:10px; padding:6px 8px; font-size:13px}
.anx img{width:48px; height:48px; object-fit:cover; border-radius:8px}
.anx audio{height:34px; flex:1; min-width:0}
.anx svg{width:22px; height:22px; color:var(--pet); flex:none}
.anx span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anx small{color:var(--cz); white-space:nowrap}
.anx button{border:0; background:none; font-size:20px; line-height:1; color:var(--cz); padding:0 4px}
.msg.nova{border-color:var(--our2)}
.msg__cab{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.msg__cab>div{flex:1}
.msg__cab b{display:block; font-size:14.5px}
.msg__cab small{color:var(--cz); font-size:12px}
.msg__av{width:36px; height:36px; border-radius:50%; background:var(--pet); color:var(--our); display:grid; place-items:center; font-family:var(--serif); font-weight:600; flex:none}
.perigo-t{color:var(--neg)}
.msg__t{margin:0 0 10px; line-height:1.55; white-space:normal; overflow-wrap:anywhere}
.msg__imgs{display:grid; gap:6px; margin-bottom:10px}
.msg__imgs.n2{grid-template-columns:1fr 1fr} .msg__imgs.n3{grid-template-columns:1fr 1fr 1fr}
.msg__imgs img{width:100%; max-height:420px; object-fit:cover; border-radius:10px; display:block}
.msg__imgs.n2 img,.msg__imgs.n3 img{aspect-ratio:1; max-height:none}
.msg audio{width:100%; margin-bottom:8px}
.msg__doc{display:flex; align-items:center; gap:10px; border:1px solid var(--ln); border-radius:10px; padding:10px 12px; margin-bottom:8px; color:var(--pet); text-decoration:none}
.msg__doc svg{width:26px; height:26px; flex:none}
.msg__doc b{display:block; font-weight:500; font-size:14px; overflow-wrap:anywhere}
.msg__doc small{color:var(--cz)}
.ficha-auto{margin-top:14px}
.msg__teste{font-size:13px; margin:-4px 0 8px 46px}

/* telefones */
.tel-linha{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.tel-linha input{flex:1; min-width:0; padding:11px 12px; border:1px solid #DDD5C5; border-radius:10px; background:#fff; font:inherit}
.tel-linha select{padding:11px 8px; border:1px solid #DDD5C5; border-radius:10px; background:#fff; font:inherit; font-size:13.5px}
.tel-linha button{border:0; background:none; font-size:22px; color:var(--cz); padding:0 4px}
[data-tels] .link{font-size:13.5px}
.tel{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; margin:2px 8px 2px 0}
.tel i{font-style:normal; font-size:10.5px; font-weight:700; background:#EEF1F4; color:var(--pet); border-radius:6px; padding:1px 6px}
.tabela .nw{white-space:nowrap}
.tel-pend{font-size:12.5px; line-height:1.45; color:#8A6A2E; background:#FBF4E6; border-radius:8px; padding:7px 10px; margin:-2px 0 10px}
.tel-pend a{color:var(--pet); font-weight:600; margin-left:4px}
.tel.pend{color:var(--cz)}
.tel.pend i:last-child{background:#FBF4E6; color:#8A6A2E}

/* primeiro acesso */
.escolha{min-height:100vh; display:grid; place-items:center; padding:28px 16px; background:var(--fundo)}
.escolha__box{width:100%; max-width:760px}
.escolha__box>img{width:60px; height:60px; border-radius:14px; display:block}
.escolha__box h1{font-size:28px; margin:18px 0 6px}
.escolha__ops{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
.escolha__op{background:#fff; border:1px solid var(--ln); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column}
.escolha__op h3{font-size:20px; margin-bottom:8px}
.escolha__op p{font-size:14px; line-height:1.55; color:var(--cz); margin:0 0 14px}
.escolha__op .bt{margin-top:auto}
.escolha__ok{color:var(--pos)!important; font-weight:500}
@media (max-width:700px){ .escolha__ops{grid-template-columns:1fr} .escolha__box h1{font-size:23px} }

/* Mês em colunas, como na planilha: item | previsto | pago ou gasto | falta */
.mes-sec{margin-top:22px}
.mes-sec > .rot{font-size:12.5px; margin-bottom:10px}
.mes-sec .contas{margin-top:0; margin-bottom:16px; grid-template-columns:1fr}
.mes-sec .contas .card:first-child{grid-column:auto}
.tab .card-cab{margin-bottom:6px}
.tl{display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3, minmax(74px,1fr)); gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #F1ECE3; font-size:14px; font-variant-numeric:tabular-nums}
.tl > div{text-align:right; white-space:nowrap}
.tl > div:first-child{text-align:left; white-space:normal}
.tl[data-l],.tl[data-s],.tl[data-saldo]{cursor:pointer}
.tl[data-l]:hover,.tl[data-s]:hover,.tl[data-saldo]:hover{background:#FCFAF6}
.tl.cab{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cz); padding:6px 0; cursor:default}
.tl.tot{font-weight:600; border-bottom:0; border-top:1.5px solid var(--pet); color:var(--pet)}
.tl.ok > div:nth-child(2){color:var(--cz)}
.tl .neg{color:var(--neg)}
.tl__n{display:flex; align-items:center; gap:9px; min-width:0}
.tl__n > span:last-child{min-width:0}
.tl__n b{font-weight:500; display:block; overflow-wrap:anywhere}
.tl__n small{display:block; color:var(--cz); font-size:12px; line-height:1.35; overflow-wrap:anywhere}
.ct{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) 74px 74px auto; gap:8px; align-items:end; padding:10px 0; border-bottom:1px solid #F1ECE3}
.ct .campo{margin:0}
.bancos{margin-top:4px}
.banco .valor{margin:10px 0 2px}
.banco--off{opacity:.6}
.banco__bts{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px}
.extrato{max-height:58vh; overflow:auto}
.extrato em.pos{color:var(--pos)} .extrato em.neg{color:var(--neg)}
.link-claro{color:inherit; text-decoration:underline; text-underline-offset:2px}
.lc-por{display:block; color:var(--cz); font-size:11.5px}
.pt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:8px}
.pt input{width:100%; min-width:0; padding:9px 10px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:14px}
.pt input[data-k=valor]{text-align:right}
.pts-tot{margin:12px 0 0; font-size:14px}
.reserva-prog{margin-top:16px}
.reserva-reg{margin-top:12px}
.ct-uso{grid-column:1 / -1; color:var(--cz); font-size:12px}
.cts [data-add]{margin-top:10px}
@media (max-width:640px){ .ct{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} .ct-nome{grid-column:1 / -1} }
.ck{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid #CFC6B4; background:#fff; color:transparent; font-size:13px; font-weight:700; line-height:1; display:inline-grid; place-items:center; padding:0}
.ck.on{background:var(--pos); border-color:var(--pos); color:#fff}
.ck.meio{background:#E9B949; border-color:#E9B949; color:#fff}
.seta{flex:none; width:24px; text-align:center; color:var(--cz); font-size:20px; transition:transform .15s}
.tl.aberta .seta{transform:rotate(90deg)}
.barra.mini{display:block; height:4px; margin-top:5px; max-width:160px}
.tl-lanc{background:#FBF8F2; border-radius:10px; padding:6px 12px; margin:4px 0 8px}
.lc{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; padding:7px 0; border-bottom:1px solid #F1ECE3; font-size:13.5px}
.lc span{color:var(--cz)} .lc b{font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .lc em{font-style:normal; font-weight:600}
.lc-acoes{display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 4px}
.bt-mini{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--pet); background:var(--pet); color:var(--our); border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600; white-space:nowrap}
.bt-mini svg{width:14px; height:14px}
.bt-mini.lin{background:#fff; color:var(--pet)}
.bt--perigo{color:var(--neg)!important; border-color:#E5C4C2!important; margin-right:auto}
@media (max-width:600px){
  .tl{grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 8px; font-size:13px}
  .tl > div:first-child{grid-column:1 / -1}
  .tl.cab > div:first-child{display:none}
  .tl.cab{font-size:10px; letter-spacing:.05em}
  .tl__n b,.tl__n small{white-space:normal}
  .tl__n{gap:7px} .tl__n small{font-size:11px}
  .ck,.seta{width:22px; height:22px}
}

/* 8 Pilares */
.pl-grade{display:grid; grid-template-columns:1fr; gap:12px; align-content:start}
.pl input[type=range]{width:100%; accent-color:var(--pet); margin:4px 0 6px}
.pl input[type=range].vazio{opacity:.35}
.pl-cab{display:flex; justify-content:space-between; align-items:center; margin-top:6px}
.pl-lista{list-style:none; margin:8px 0 0; padding:0}
.pl-acao{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid #F1ECE3; font-size:13.5px}
.pl-acao:last-child{border-bottom:0}
.pl-acao.feito span:not(.ck){text-decoration:line-through; color:var(--cz)}
.pl-acao em{font-style:normal; font-weight:600; font-size:13px; white-space:nowrap}
.prio{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A6A2E; background:#FBF4E6; padding:1px 6px; border-radius:6px}
.pl-foco{margin-top:14px}
.pl-ed{display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:6px 8px; padding:8px 0; border-bottom:1px solid #F1ECE3}
.pl-ed input[name=texto],.pl-ed input[name=valor]{padding:9px 10px; border:1px solid #DDD5C5; border-radius:8px; font:inherit; font-size:14px; min-width:0}
.pl-prio{grid-column:1 / -1; font-size:13px; color:var(--cz); display:flex; align-items:center; gap:6px}
.pl-eds{margin-bottom:10px; max-height:52vh; overflow:auto}
@media (min-width:1200px){ .pl-grade{grid-template-columns:1fr 1fr} }

/* Fatura do cartão */
.cab-bts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.modal__box--largo{max-width:760px; max-height:92vh; display:flex; flex-direction:column}
.fat{display:flex; flex-direction:column; min-height:0; flex:1}
.fat h2{margin-bottom:10px}
.fat-cab{display:grid; grid-template-columns:1fr 170px; gap:10px}
.fat-cab .campo{margin-bottom:8px}
.fat-tot{font-size:14px; color:var(--cz); margin-bottom:8px} .fat-tot b{color:var(--pet); font-size:17px}
.aviso-fat{margin-top:6px; background:#FBF4E6; color:#8A6A2E; border-radius:8px; padding:7px 10px; font-size:13px}
.faixa-sug{display:flex; justify-content:space-between; align-items:center; gap:10px; background:#FBF4E6; border-radius:10px; padding:9px 12px; margin-bottom:8px; font-size:13.5px}
.fat-lista{overflow:auto; min-height:120px; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln)}
.fr{display:grid; grid-template-columns:20px 44px minmax(0,1fr) 96px; gap:8px; align-items:start; padding:8px 4px; border-bottom:1px solid #F1ECE3}
.fr:last-child{border-bottom:0}
.fr.fora{opacity:.45}
.fr.pend{background:#FFFBF2}
.fr-inc{margin-top:10px; accent-color:var(--pet)}
.fr-data{font-size:12.5px; color:var(--cz); padding-top:9px; font-variant-numeric:tabular-nums}
.fr-nome input,.fr-v{width:100%; padding:7px 9px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:14px; background:#fff; min-width:0}
.fr.pend .fr-nome input{border-color:var(--our2); background:#FFF8EA}
.fr-nome small{display:block; color:var(--cz); font-size:11.5px; margin-top:3px; overflow-wrap:anywhere}
.fr-v{text-align:right; font-variant-numeric:tabular-nums}
.fr-sugere{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:5px; font-size:12px; color:#8A6A2E}
.fat .acoes{margin-top:12px}
@media (max-width:600px){
  .fat-cab{grid-template-columns:1fr}
  .fr{grid-template-columns:20px minmax(0,1fr) 84px; }
  .fr-data{grid-column:2; grid-row:1; padding-top:0}
  .fr-nome{grid-column:2; grid-row:2}
  .fr-v{grid-column:3; grid-row:2}
  .fr-inc{grid-row:2}
}
.fat-cab.so-venc{grid-template-columns:170px}

/* Recorrência */
.rec-bt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px dashed #CFC6B4; background:#FCFAF6; border-radius:10px; padding:10px 12px; margin:2px 0 6px; color:var(--pet)}
.rec-bt svg{width:22px; height:22px; flex:none}
.rec-bt b{display:block; font-weight:600; font-size:14px} .rec-bt small{display:block; color:var(--cz); font-size:12px}
.rec-modo{display:flex; margin-bottom:12px} .rec-modo button{flex:1}
.rec-lista{max-height:42vh; overflow:auto; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln); margin-bottom:8px}
.rec-l{display:grid; grid-template-columns:20px 54px minmax(0,1fr) 140px; gap:8px; align-items:center; padding:6px 2px; border-bottom:1px solid #F1ECE3; font-size:13.5px}
.rec-l:last-child{border-bottom:0} .rec-l.fora{opacity:.45}
.rec-l input[type=checkbox]{accent-color:var(--pet)}
.rec-l .rec-v,.rec-l .rec-d{width:100%; min-width:0; padding:7px 8px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:13.5px}
.rec-l .rec-v{text-align:right}
.rec-nota{margin:4px 0 0}
.rec-atual{margin-top:10px; background:#FBF4E6; color:#8A6A2E; border-radius:8px; padding:8px 10px; font-size:13px}
.rec-atual .link{border:0; background:none; color:var(--neg); text-decoration:underline; font:inherit; padding:0; margin-left:4px}
@media (max-width:600px){ .rec-l{grid-template-columns:20px 46px minmax(0,1fr) 118px; gap:6px} }

.pl-dica{margin:2px 0 6px}
.pl-vazio{padding:4px 0}
.pl-mais{display:none}
/* 8 Pilares no computador: tudo numa tela, sem rolar. Resumo à esquerda, pilares em grade 2 x 4. */
@media (min-width:901px){
  .pl-tela{grid-template-columns:max(360px, 27%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); flex:1 1 auto; min-height:0; gap:14px}
  .pl-resumo{display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:18px 20px}
  .pl-resumo > *{flex-shrink:0} .pl-resumo .radar{flex-shrink:1}
  .pl-resumo .card-cab{margin-bottom:4px} .pl-resumo h3{font-size:17px}
  .pl-intro{font-size:12.5px; margin:0 0 2px}
  .pl-resumo .radar{flex:1 1 auto; min-height:0; width:100%; max-height:400px}
  .pl-resumo .legenda{margin-top:4px}
  .pl-nums{margin-top:10px!important; gap:10px!important}
  .pl-nums .card{padding:12px 14px} .pl-nums .valor{font-size:22px}
  .pl-resumo .pl-foco{margin-top:10px} .pl-foco .linha{padding:5px 0; font-size:13.5px}
  .pl-grade{grid-template-columns:1fr 1fr!important; grid-template-rows:repeat(4, minmax(0,1fr)); gap:10px; min-height:0; height:100%}
  .pl{display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:12px 14px}
  .pl .rd-area__cab{font-size:13.5px} .pl .rd-area__cab b{min-width:0}
  .pl-dica{display:none}
  .pl input[type=range]{margin:2px 0 4px}
  .pl-cab{margin-top:0}
  .pl-cab .bt-mini{padding:3px 8px; font-size:12px}
  .pl-lista{margin-top:4px; min-height:0; overflow:hidden}
  .pl-lista li:nth-child(n+3){display:none}
  .pl-acao{padding:4px 0; font-size:13px; grid-template-columns:22px minmax(0,1fr) auto}
  .pl-acao > span:not(.ck){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pl-acao .ck{width:20px; height:20px; font-size:11px}
  .pl-mais{display:inline; border:0; background:none; padding:0 0 0 6px; color:var(--pet); font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:underline}
  .pl-vazio{font-size:13px; padding:2px 0}
}
@media (min-width:901px) and (max-height:820px){
  .pl{padding:8px 12px}
  .pl .rd-area__cab{font-size:13px}
  .pl input[type=range]{margin:0 0 2px; height:16px}
  .pl-cab .bt-mini{padding:2px 7px; font-size:11.5px}
  .pl-lista{margin-top:2px}
  .pl-acao{padding:2px 0; font-size:12.5px}
  .pl-acao .ck{width:18px; height:18px}
  .pl-intro{display:none}
  .pl-nums .card{padding:9px 12px} .pl-nums .valor{font-size:19px}
  .pl-resumo .pl-foco .linha{padding:3px 0}
}
@media (min-width:901px){ .pl-mais.m4{display:none} }
@media (min-width:901px) and (min-height:950px){
  .pl-lista li:nth-child(n+3){display:grid} .pl-lista li:nth-child(n+5){display:none}
  .pl-mais.m2{display:none} .pl-mais.m4{display:inline}
  .pl-resumo .radar{max-height:520px}
}
/* Página de tela única (8 Pilares): a área principal ocupa a altura da janela e o conteúdo se ajusta a ela, sem rolar. */
@media (min-width:901px){
  .casca--tela{height:100vh; min-height:0}
  .casca--tela .principal{display:flex; flex-direction:column; height:100vh; overflow:hidden; padding-bottom:24px}
  .casca--tela .topo{flex:none}
}

/* Pessoas com acesso */
.acesso-bts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.bt-mini.perigo{color:var(--neg); border-color:#E5C4C2}
td.nw small{display:block; color:var(--cz); font-size:11.5px; white-space:nowrap}
/* Roda do Dinheiro no computador: mesmo modelo dos 8 Pilares, numa tela só. */
@media (min-width:901px){
  .rd-rodape{display:none}
  .rd-tela .pl-resumo .chips{margin-top:10px!important; margin-bottom:0}
  .rd-form{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); gap:10px 12px; min-height:0; background:none; border:0; padding:0}
  .rd-form__cab{grid-column:1; grid-row:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .rd-form__cab .card-cab{margin:0; gap:14px}
  .rd-form__cab .card-cab h3{font-size:17px}
  .rd-form__cab .sub{margin:0!important}
  .rd-form [data-salvar]{grid-column:2; grid-row:1; width:auto; margin:0!important; padding:9px 18px}
  .rd-grade{grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:12px; min-height:0; overflow:auto}
  .rd-grade .rd-bloco{margin:0; background:#fff; border:1px solid var(--ln); border-radius:14px; padding:12px 16px; overflow:auto}
  .rd-grade .rd-area{padding:6px 0}
  .rd-grade .rd-area input[type=range]{margin:4px 0 0}
}

/* Janela de pagamento ou recebimento */
.pg-resumo{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:#FBF8F2; border-radius:12px; padding:10px 12px; margin-bottom:14px}
.pg-resumo .rot{margin-bottom:2px; font-size:10.5px}
.pg-resumo b{font-size:15px; font-weight:600; color:var(--pet)} .pg-resumo b.ok{color:var(--pos)}
.bt--ok{background:var(--pos); border-color:var(--pos); color:#fff; font-size:15px; margin-top:4px}
.pg-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:12px}
.link-acao{display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:4px 2px; color:var(--pet); font-size:13px; font-weight:500; text-decoration:underline}
.link-acao svg{width:15px; height:15px}
.rep-tg{margin:2px 0 10px; border:0!important; padding:0!important}
.novo-grupo{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:14px; border:1.5px dashed #CFC6B4; border-radius:14px; background:transparent; color:var(--pet); font-weight:600; font-size:14px}
.novo-grupo svg{width:16px; height:16px}
.novo-grupo:hover{background:#FCFAF6}

/* Lançamentos detalhados: data, nome, parcela e valor editáveis */
.fr{grid-template-columns:20px 132px minmax(0,1fr) 96px 22px}
.fr-d{width:100%; min-width:0; padding:7px 6px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:13px; background:#fff}
.fr-nl{display:flex; gap:6px}
.fr-nl .fr-n{flex:1}
.fr-p{width:58px; flex:none; padding:7px 6px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:13px; text-align:center}
.fr-x{border:0; background:none; color:var(--cz); font-size:20px; line-height:1; padding:6px 0 0; cursor:pointer}
.fr-x:hover{color:var(--neg)}
.fat-pe{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 2px 0}
.fat-proj{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--cz)}
.fat-proj input{accent-color:var(--pet)}
@media (max-width:600px){
  .fr{grid-template-columns:20px minmax(0,1fr) 84px 22px}
  .fr-inc{grid-row:1 / span 2}
  .fr-d{grid-column:2; grid-row:1; max-width:150px}
  .fr-nome{grid-column:2 / 4; grid-row:2}
  .fr-v{grid-column:3; grid-row:1}
  .fr-x{grid-column:4; grid-row:1}
}

/* Sonhos e desejos: progresso em destaque e ligação com o mês */
.sonho__v{font-size:15px}
.sonho__v span{font-family:var(--serif); font-size:22px; font-weight:600; color:var(--pet)}
.barra--g{height:10px; border-radius:6px}
.barra--g i{background:linear-gradient(90deg, var(--our2), #B8955A)}
.sonho__falta{font-size:13px; color:var(--cz)} .sonho__falta b{color:var(--pet)}
.sonho__bts{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.sonho__bts .bt{flex:1; min-width:120px}
.desejo--mes{background:#FFFBF2; border-radius:10px; padding-left:10px; padding-right:10px}
.desejo--mes .bt-mini{margin-top:6px}
.tab--sonhos .seta,.tab--desejos .seta{color:#B8955A; font-size:15px}
.tab--desejos .tl.ok .seta{color:var(--pos)}
.sec-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.sec-cab .rot{margin:0}
.cab-bts .bt-mini.perigo{padding:5px 7px}

/* Botões só com ícone nos quadros do mês, sempre na mesma linha */
.bt-ico{width:30px; height:28px; padding:0!important; justify-content:center}
.bt-ico svg{width:15px; height:15px; margin:0}
.card-cab .cab-bts{flex-wrap:nowrap; flex:none}
.tab .card-cab h3{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:600px){ .tab .card-cab{gap:8px} .tab .card-cab h3{font-size:17px} .cab-bts{gap:5px} }

/* Sonhos: botões sempre na base do cartão, lado a lado */
.sonho__corpo{gap:4px}
.sonho__bts{margin-top:auto!important; padding-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sonho__bts .bt{white-space:nowrap; min-width:0; padding:9px 10px}
.sonho__bts .bt svg{width:15px; height:15px}
.sonho__bts .bt:only-child{grid-column:1 / -1}
.sonho__bts .bt[disabled]{opacity:.45; cursor:not-allowed}
.desejo__acoes{display:flex; align-items:center; gap:10px; flex:none}
@media (max-width:600px){ .sonho__bts .bt{font-size:12.5px; padding:8px 6px; gap:4px} .desejo__acoes{gap:6px} }
/* rodapé do menu lateral mais justo */
.lateral{padding-bottom:12px}
.lateral__pe{padding-top:10px}
.lateral__pe a,.lateral__pe button{margin-top:4px}
.sonho__bts .bt{height:40px; box-sizing:border-box}
.mes-sec .contas{grid-template-columns:minmax(0,1fr)}
.tab{min-width:0}
.tab .card-cab > *:first-child{min-width:0}
.cab-bts a.bt-ico{display:inline-flex; align-items:center}
@media (max-width:600px){ .tab .card-cab:has([data-importar-fatura]){flex-wrap:wrap; row-gap:8px} .tab .card-cab:has([data-importar-fatura]) h3{flex:1 1 100%} .tab .card-cab:has([data-importar-fatura]) .cab-bts{margin-left:auto} }
.sonhos{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:1200px){ .sonhos{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:600px){ .sonho__bts{grid-template-columns:1fr; gap:6px} .sonho__bts .bt{height:38px; font-size:13px} }
.grade > *{min-width:0}
.desejo__acoes{flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:600px){ .linha:has(.desejo__acoes){flex-wrap:wrap; row-gap:6px} .linha:has(.desejo__acoes) > div:first-child{flex:1 1 100%} .desejo__acoes{margin-left:auto} }
@media (max-width:600px){ .desejo__acoes{flex-wrap:nowrap; gap:6px} .desejo__acoes .prio{font-size:9.5px; padding:1px 5px} .desejo__acoes .bt-mini{padding:4px 8px} }

/* Quadros do mês */
.quadros-barra{display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:22px 0 10px; font-size:12.5px; color:var(--cz); min-width:0}
.quadros-acoes{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; min-width:0; margin-left:auto}
.quadros,.quadros__col{display:flex; flex-direction:column; gap:16px; min-width:0}
.quadros__col{min-height:48px}
.quadros__col > .card{margin-top:0!important; min-width:0; max-width:100%}
.quadros .card-cab{min-width:0}
.quadros[data-arrastavel] .card-cab{cursor:move}
.quadros[data-arrastavel] .card-cab h3,.quadros[data-arrastavel] .alca{touch-action:none}
.alca{display:inline-block; margin-right:7px; color:var(--cz); cursor:move; font-family:var(--sans); font-weight:400}
.quadro-fantasma{position:fixed; z-index:40; margin:0!important; max-width:100vw; opacity:.6; pointer-events:none; box-shadow:0 8px 24px rgba(19,49,67,.16); overflow:hidden}
.quadro-vaga{flex:none; width:100%; min-width:0; border:1.5px dashed var(--our2); background:#FBF8F2; border-radius:14px}
body.arrastando{user-select:none; cursor:move}
/* Uma coluna só também no computador: os quadros ficam um embaixo do outro e continuam arrastáveis. */
.quadros__col[data-col="1"]:not(:has(.card)){min-height:0}
body.arrastando .quadros__col[data-col="1"]{min-height:48px}
.banco-ativar{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap}
.banco-ativar > div{flex:1 1 320px; min-width:0}
.banco-ativar h3{margin:0 0 4px}
.link-acao--ok{color:var(--pos); font-weight:600}
.rest-lista{max-height:46vh; overflow:auto; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln)}
.rest-l{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 2px; border-bottom:1px solid #F1ECE3; cursor:pointer}
.rest-l:last-child{border-bottom:0}
.rest-l input{accent-color:var(--pos); width:18px; height:18px}
.rest-l b{font-weight:500; display:block; overflow-wrap:anywhere}
.rest-l small{display:block; color:var(--cz); font-size:12px}
.rest-l em{font-style:normal; font-weight:600}
.rest-tot{margin:10px 0 0; font-size:14px}
.transf{margin-top:16px}
.transf-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end}
.transf-g .campo{margin:0; min-width:0}
.transf-obs{grid-column:span 2}
@media (max-width:640px){ .transf-obs{grid-column:auto} .transf-g .bt{width:100%} }
#toast.com-btn{pointer-events:auto}
.toast-undo{margin-left:10px; background:none; border:0; color:var(--our); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:2px 4px}
.hist b{font-weight:500; overflow-wrap:anywhere}
.hist small{display:block; color:var(--cz); font-size:12px}
.hist--off{opacity:.55}

.fechar-linha{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 0}
.fechar-linha small{color:var(--cz); font-size:12.5px}
.mes-fechado{margin:14px 0 0; padding:10px 14px; border-radius:10px; background:#F3EEE2; color:var(--cz); font-size:13px}
.link-discreto{background:none; border:0; padding:0; margin-left:6px; color:var(--cz); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer}
.fech-lista{max-height:44vh; overflow:auto; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln); margin:8px 0}
.fech-l{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,150px); gap:10px; align-items:center; padding:8px 2px; border-bottom:1px solid #F1ECE3}
.fech-l:last-child{border-bottom:0}
.fech-l b{font-weight:500; display:block; overflow-wrap:anywhere}
.fech-l small{display:block; color:var(--cz); font-size:12px}
.fech-l select{width:100%; min-width:0; padding:7px 8px; border:1px solid #E3DCCD; border-radius:8px; font:inherit; font-size:13px}
.fech-res{padding-left:18px; line-height:1.55; font-size:14px}

.busca-mes{position:relative; margin:0 0 14px}
.busca-mes input{width:100%; padding:11px 14px; border:1px solid #E3DCCD; border-radius:10px; font:inherit; background:#fff}
.busca-res{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:12; background:#fff; border:1px solid #E3DCCD; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:55vh; overflow:auto}
.busca-r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left; padding:10px 12px; border:0; border-bottom:1px solid #F1ECE3; background:none; font:inherit; cursor:pointer}
.busca-r:hover{background:#FCFAF6}
.busca-r b{font-weight:500; display:block; overflow-wrap:anywhere}
.busca-r small{display:block; color:var(--cz); font-size:12px}
.busca-r em{font-style:normal; font-weight:600; text-align:right}
.tl.achada{background:#FFF3C4; transition:background 1.2s}

.conc-up{margin-top:14px; padding-top:12px; border-top:1px solid #F1ECE3}
.conc-bt{cursor:pointer; display:inline-flex}
.conc-res{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--cz); margin:6px 0 10px}
.conc-res b{color:var(--pet)}
.conc-ia{background:#F6F1E6; border-radius:10px; padding:10px 14px; margin:8px 0; font-size:13.5px}
.conc-ia p{margin:4px 0 0; line-height:1.5}
.conc-ok{color:var(--pos); font-weight:600}
.conc-aviso{background:#FFF3C4; border-radius:8px; padding:8px 12px; font-size:13px}
.conc-lista{max-height:50vh; overflow:auto}
.conc-h{margin:14px 0 4px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--cz)}
.conc-h span{background:#F1ECE3; border-radius:999px; padding:1px 8px; margin-left:6px}
.conc-l{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:9px 0; border-bottom:1px solid #F1ECE3}
.conc-t{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 10px; font-size:13.5px}
.conc-t small{grid-column:2 / -1; color:var(--cz); font-size:12px}
.conc-t b{font-weight:500; overflow-wrap:anywhere}
.conc-t em{font-style:normal; font-weight:600}
.conc-t em.neg{color:var(--neg)} .conc-t em.pos{color:var(--pos)}
.conc-a{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.conc-l.feito{opacity:.6}
.conc-feito{color:var(--pos); font-size:12.5px; font-weight:600}
@media (max-width:640px){ .conc-l{grid-template-columns:minmax(0,1fr)} .conc-a{justify-content:flex-start} }

.emp-topo{max-width:240px; margin-bottom:14px}
.emp-graf{display:flex; gap:6px; align-items:flex-end; height:150px}
.emp-b{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; border:0; background:none; padding:2px 0; cursor:pointer; border-radius:8px}
.emp-b.on{background:#F6F1E6}
.emp-b__bars{flex:1; width:100%; display:flex; gap:3px; align-items:flex-end; justify-content:center}
.emp-b__bars i{display:block; width:42%; max-width:16px; border-radius:3px 3px 0 0}
.emp-b small{font-size:11px; color:var(--cz); text-transform:capitalize}
.emp-leg{display:flex; gap:14px; font-size:12px; color:var(--cz); margin:-2px 0 8px}
.emp-leg i,.emp-b__bars i.rec{background:var(--pos)}
.emp-leg i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px}
.emp-leg span:nth-child(2) i,.emp-b__bars i.des{background:#C9A24B}

/* Sonhos na tela inicial: foto mais baixa no computador para os botões Guardar e Editar aparecerem sem rolar */
@media (min-width:901px){ .sonho__foto{aspect-ratio:21/20} }

/* Telefones: o campo do número não pode encolher quando há o seletor Pessoal/Empresa; se faltar espaço, o seletor desce */
.tel-linha{flex-wrap:wrap}
.tel-linha input{flex:1 1 150px; min-width:150px}
.tel-linha select{flex:0 1 190px; min-width:0; max-width:100%}
.tel-linha button{margin-left:auto}
.tel-pend__acoes{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.tel-pend__acoes .link{font-size:12.5px; font-weight:600}

/* Desejos do mês ainda fora do orçamento */
.tl.fora .tl__n small{color:#8A6A2E}
.tl.fora .bt-mini{margin-top:6px}

/* Sonhos: título, prazo e custo editáveis direto no cartão */
.sonho .ed{font:inherit; color:var(--tx); background:transparent; border:0; border-bottom:1px dashed transparent; border-radius:0; padding:3px 0; width:100%; min-width:0; outline:none; transition:border-color .15s, background-color .15s}
.sonho .ed:hover{border-bottom-color:var(--our2)}
.sonho .ed:focus{border-bottom:1px solid var(--pet); background:#FFFDF6}
.sonho textarea.ed{resize:none; overflow:hidden; display:block; line-height:1.2}
.sonho .ed--titulo{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--pet)}
.sonho .ed--titulo::placeholder, .sonho .ed--custo::placeholder{color:var(--cz); font-weight:400; opacity:.8}
.ed-prazo{display:flex; flex-direction:column; gap:1px; margin-top:2px}
.ed-prazo > span{display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:11px; color:var(--cz); letter-spacing:.02em}
.ed-prazo i{font-style:normal; color:#8A6A2E; font-weight:600; text-align:right}
.sonho .ed-prazo .ed{font-size:14.5px}
.ed-custo{display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--cz); margin-top:2px}
.sonho .ed--custo{width:auto; flex:1; font-size:14.5px; font-weight:600; color:var(--pet)}
@media (max-width:900px){ .sonho .ed--titulo{font-size:16px} }
@media (pointer:coarse){ .sonho .ed{font-size:16px} }

/* Histórico do que foi guardado, dentro da janela de Guardar */
.sonho-hist{border:1px solid var(--ln); border-radius:10px; padding:6px 12px 8px; margin:0 0 14px; max-height:190px; overflow:auto; background:#FFFDF6}
.sonho-hist h4{margin:4px 0 6px; font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--cz)}
.hist-l{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--ln)}
.hist-l:first-of-type{border-top:0}
.hist-l b{font-size:14px; font-weight:600; color:var(--pet)}
.hist-l small{display:block; font-size:11.5px; color:var(--cz)}
.hist-l em{font-style:normal; font-weight:600; color:var(--pos); white-space:nowrap}

/* ==========================================================================
   Rota 3.0: visual novo. Blocos brancos com sombra suave, sem contorno;
   cartão principal petróleo; menu flutuante translúcido no celular.
   ========================================================================== */
:root{
  --fundo:#F2F3F1; --cz:#5F6C78; --ln:#E9ECEA; --ouro-tx:#7E6128;
  --r-g:22px; --r-m:16px; --r-p:12px;
  --sombra:0 1px 2px rgba(19,49,67,.04), 0 8px 24px -8px rgba(19,49,67,.10);
  --sombra-alta:0 18px 36px -14px rgba(19,49,67,.50);
  --sombra-menu:0 12px 32px -8px rgba(19,49,67,.30), 0 2px 6px rgba(19,49,67,.08);
  --suave:cubic-bezier(.2,.8,.2,1);
}
*{-webkit-tap-highlight-color:transparent}
a,button,.chip,.tl[data-l],.tl[data-s],.tl[data-saldo]{touch-action:manipulation}
:focus-visible{outline:2px solid var(--pet); outline-offset:2px}
h1,h2,h3{letter-spacing:-.01em}

/* Valores: sempre na fonte de texto, com os centavos discretos */
.valor,.hero__valor,.sonho__v span{font-family:var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.cent{opacity:.5; font-size:.72em; font-weight:500; letter-spacing:0}
.valores-ocultos .dinheiro{filter:blur(9px); user-select:none}
.dinheiro{transition:filter .18s}

/* Blocos */
.card,.sonho,.cren,.faixa-copiar,.escolha__op{border:0; border-radius:var(--r-g); box-shadow:var(--sombra)}
.card{padding:18px}
.card h3{font-size:17px}
.card--pet{background:var(--pet); box-shadow:var(--sombra-alta)}
.card--our{background:#FBF5E8}
.cren.sim{box-shadow:var(--sombra), inset 0 0 0 1.5px var(--our2)}
.faixa-copiar{background:#fff; padding:14px 16px; align-items:stretch}
.faixa-copiar .bt{flex:1 1 200px}
.barra{height:6px; background:#ECEFED}
.linha{border-bottom-color:#F1F2F0}
.rot{color:var(--cz)}
.topo small,.sonho__corpo small{color:var(--ouro-tx)}
.recado{border:0; border-left:0; border-radius:var(--r-g); background:#FBF5E8; box-shadow:var(--sombra)}
.aviso-mural{border:0; border-radius:var(--r-g); box-shadow:var(--sombra)}
.faixa-ver{border:0; border-radius:var(--r-m); box-shadow:var(--sombra)}

/* Cartão principal */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 100% 0%, #1F4A63 0%, var(--pet) 62%); color:#fff; border-radius:26px; padding:20px 20px 16px; box-shadow:var(--sombra-alta)}
.hero__cab{display:flex; justify-content:space-between; align-items:center; min-height:32px}
.hero .rot{color:#B9C8D3; margin:0; letter-spacing:.04em; text-transform:none; font-size:13.5px}
.hero__valor{font-size:clamp(34px, 11vw, 44px); font-weight:600; line-height:1.15; margin:2px 0 4px; white-space:nowrap; color:#fff}
.hero__valor.neg{color:#F6B9B5}
.hero__nota{font-size:13px; color:#B9C8D3; margin-bottom:2px}
.hero__faixa{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:11px 12px 11px 14px; border-radius:var(--r-m); background:rgba(255,255,255,.09)}
.hero__faixa small{display:block; font-size:12px; color:#B9C8D3}
.hero__faixa b{display:block; font-size:16.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--our)}
.hero__faixa b.neg{color:#F6B9B5}
.hero__bt{flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:12px; background:var(--our); color:var(--pet); font-weight:600; font-size:13.5px; text-decoration:none}
.olho{display:grid; place-items:center; width:44px; height:44px; margin:-6px -10px -6px 0; border:0; background:none; color:#D5DFE6; border-radius:50%}
.olho svg{width:20px; height:20px}
.olho[aria-pressed="true"]{color:var(--our)}

/* Atalhos redondos */
.resumo-topo{display:grid; gap:14px}
.resumo-lado{display:grid; gap:14px; align-content:start; min-width:0}
.resumo-bloco{margin-top:14px}
.atalhos{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; padding:14px 8px 12px}
.atalhos a,.atalhos button{display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:none; padding:0; color:var(--pet); font-size:12.5px; font-weight:500; text-decoration:none; text-align:center; line-height:1.25}
.atalhos span{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--our); color:var(--pet); box-shadow:0 8px 16px -8px rgba(160,125,62,.75); transition:transform .14s var(--suave)}
.atalhos svg{width:22px; height:22px}

/* Dois blocos lado a lado, também no celular */
.duplas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tile{padding:14px 14px 16px; min-width:0}
.tile .rot{letter-spacing:0; text-transform:none; font-size:13px; margin:8px 0 2px}
.tile .valor{font-size:clamp(17px, 5.2vw, 22px); font-weight:600; color:var(--pet)}
.tile .sub{font-size:12px; margin-top:2px; overflow-wrap:anywhere}
.tile__ico{display:grid; place-items:center; width:32px; height:32px; border-radius:50%}
.tile__ico svg{width:16px; height:16px}
.tile__ico.entrada{background:#E4F2EA; color:var(--pos)}
.tile__ico.entrada svg{transform:rotate(180deg)}
.tile__ico.saida{background:#F7E9E8; color:var(--neg)}

/* Atividade recente */
.ver-tudo{flex:none; font-size:13px; font-weight:600; color:var(--ouro-tx); text-decoration:none; padding:8px 0 8px 8px}
.mov{display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0}
.mov__ico{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#F2F3F1; color:var(--cz)}
.mov__ico svg{width:17px; height:17px}
.mov b{display:block; font-weight:500; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mov small{display:block; color:var(--cz); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mov em{font-style:normal; font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--pet)}

/* Cabeçalho das telas */
.topo{align-items:center; flex-wrap:nowrap; margin-bottom:16px}
.topo > div:first-child{min-width:0}
.topo small{letter-spacing:.06em; text-transform:none; font-size:13px; font-weight:500}
.topo h1{font-size:25px; line-height:1.15}
.topo__dir{display:flex; align-items:center; gap:8px; flex:none}
.mes-sel{border:0; background:#fff; box-shadow:var(--sombra); border-radius:999px; min-height:44px; padding:0 12px; max-width:150px; font-size:13.5px; font-weight:500; color:var(--pet)}
.sino{position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--sombra); color:var(--pet)}
.sino svg{width:21px; height:21px}
.sino .ponto-novo{top:9px; right:10px}
.contas-sel{display:flex; border:0; border-radius:999px; background:#fff; box-shadow:var(--sombra); padding:4px; width:max-content; max-width:100%}
.contas-sel button{border-radius:999px; min-height:36px; padding:0 18px}
.busca-mes input{border:0; border-radius:999px; min-height:46px; padding:0 18px; box-shadow:var(--sombra)}
.busca-res{border:0; border-radius:var(--r-m)}
.link-claro{color:#E6EDF2}

/* Botões e campos */
.bt{border-radius:14px; min-height:46px; transition:transform .14s var(--suave), opacity .14s}
.bt--lin{border:1.5px solid #D8DEDF; color:var(--pet)}
.bt--p{min-height:40px}
.bt svg{width:17px; height:17px}
.bt-mini{border-radius:10px; min-height:34px; padding:6px 12px}
.bt-ico{width:36px; height:34px}
.chip{min-height:38px; padding:0 14px; border-radius:999px; border:0; background:#F2F3F1; color:var(--pet); font-size:13.5px}
.campo input,.campo select,.campo textarea,textarea{border:1.5px solid transparent; background:#F2F3F1; border-radius:var(--r-p); min-height:48px; transition:border-color .14s, background-color .14s}
.campo input:focus,.campo select:focus,.campo textarea:focus,textarea:focus{background:#fff; border-color:var(--pet); box-shadow:0 0 0 3px rgba(19,49,67,.10); outline:none}
.campo span{letter-spacing:0; text-transform:none; font-size:13px; font-weight:500}
.ck{position:relative}
.ck::after{content:""; position:absolute; inset:-10px}
.bt:active,.bt-mini:active,.chip:active,.hero__bt:active,.sino:active,.abas a:active,.abas button:active,.atalhos a:active span,.atalhos button:active span{transform:scale(.95)}
.mes-fechado{display:flex; align-items:center; gap:10px; border-radius:var(--r-m); background:#E9ECE8}
.mes-fechado svg{width:18px; height:18px; flex:none}
.fechar-linha .bt svg{width:15px; height:15px}

/* Tabelas do mês */
.tl{border-bottom-color:#F1F2F0}
.tl.tot{border-top:0; margin-top:8px; padding:10px 12px; background:var(--fundo); border-radius:var(--r-p)}
.tl.cab{letter-spacing:.02em; text-transform:none; font-size:12px}
.quadros,.quadros__col{gap:14px}
.novo-grupo{border-radius:var(--r-g); min-height:52px}

/* Sonhos */
.sonho{overflow:hidden}
.sonho__foto{background:#ECE7DB}
.sonho__v span{font-size:21px; color:var(--pet)}
.barra--g{height:8px}
.sonho__bts .bt{border-radius:12px}
.capa-rota{background:none; color:var(--tx); padding:0 2px; margin-bottom:14px; gap:14px; border-radius:0}
.capa-rota__foto{width:60px; height:60px; border-radius:50%; border:2px solid #fff; background:#E7E2D5; box-shadow:var(--sombra); color:var(--cz); font-size:10.5px}
.capa-rota__txt small{color:var(--cz); letter-spacing:0; text-transform:none; font-size:13px; font-weight:400}
.capa-rota__txt b{color:var(--pet); font-size:21px}
.capa-rota .link{color:var(--ouro-tx)}
.foto-ajuste{min-height:32px}

/* Entrada de tela */
@keyframes rota-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.principal.entra{animation:rota-entra .22s var(--suave)}

/* Janelas */
@keyframes rota-fundo{from{opacity:0} to{opacity:1}}
@keyframes rota-sobe{from{transform:translateY(32px); opacity:.4} to{transform:none; opacity:1}}
.modal{background:rgba(12,24,33,.5); animation:rota-fundo .18s ease-out}
.modal__box{border-radius:26px; animation:rota-sobe .26s var(--suave); box-shadow:0 24px 60px -18px rgba(12,24,33,.5)}
.pg-resumo{background:var(--fundo)}

/* Aviso */
#toast{border-radius:999px; padding:12px 20px; box-shadow:var(--sombra-menu); max-width:calc(100vw - 32px); width:max-content; text-align:center}

/* Computador */
@media (min-width:901px){
  .resumo-topo{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hero{padding:26px 26px 20px}
  .card{padding:20px 22px}
  .principal{padding-top:26px}
}

/* Celular: menu flutuante e janelas que sobem do pé da tela */
@media (max-width:900px){
  .principal{padding:14px 16px calc(112px + env(safe-area-inset-bottom))}
  .topo h1{font-size:23px}
  .abas{left:14px; right:14px; bottom:calc(10px + env(safe-area-inset-bottom) * .6); height:66px; padding:0 6px; gap:2px; border-radius:33px;
    background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
    border:1px solid rgba(255,255,255,.75); box-shadow:var(--sombra-menu); transform:translateZ(0)}
  .abas a,.abas button{flex:1 1 0; min-width:0; height:54px; justify-content:center; gap:2px; padding:0; border-radius:27px; color:#4A5864; font-size:10.5px; font-weight:500; transition:background-color .18s, color .18s, transform .14s var(--suave)}
  .abas svg{width:22px; height:22px}
  .abas .on{background:rgba(220,189,134,.34); color:var(--pet); font-weight:600}
  .abas button[data-lancar]{flex:0 0 56px; background:none}
  .abas .mais{width:50px; height:50px; background:var(--pet); color:var(--our); box-shadow:0 8px 16px -6px rgba(19,49,67,.6)}
  .abas .mais svg{width:22px; height:22px}
  .ponto-novo{top:7px}
  .modal{place-items:end center; padding:0}
  .modal__box,.modal__box--largo{max-width:none; border-radius:26px 26px 0 0; max-height:92dvh; padding:26px 20px calc(20px + env(safe-area-inset-bottom)); position:relative}
  .modal__box::before{content:""; position:absolute; top:9px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:#D8DCDD}
  .acoes{position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom)); margin:10px -20px calc(-20px - env(safe-area-inset-bottom)); padding:12px 20px calc(16px + env(safe-area-inset-bottom)); background:#fff}
  #toast{bottom:calc(88px + env(safe-area-inset-bottom) * .6); font-size:13.5px}
  .sonhos{gap:12px}
  .sonho__corpo{padding:12px 12px 14px}
  .card--our,.recado{border-radius:var(--r-g)}
}
@media (pointer:coarse){ input,select,textarea{font-size:16px} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .abas{background:rgba(255,255,255,.97)} }
@media (prefers-reduced-motion:reduce){
  .principal.entra,.modal,.modal__box{animation:none}
  *{transition-duration:.01ms!important}
}
@media (min-width:901px){ .resumo-topo .hero{display:flex; flex-direction:column} .resumo-topo .hero__faixa{margin-top:auto} .resumo-topo .hero__valor{margin-bottom:18px} }
.mes-sel{max-width:158px; padding:0 8px 0 14px; font-size:13px}

/* Olho: esconde também o previsto e os números das tabelas, dos movimentos e dos sonhos */
.valores-ocultos .tile .sub,
.valores-ocultos .hero__nota b,
.valores-ocultos .mov em,
.valores-ocultos .tl:not(.cab) > div:not(:first-child),
.valores-ocultos .sonho__v,
.valores-ocultos .sonho__falta,
.valores-ocultos .ed--custo,
.valores-ocultos .sonho-hist em,
.valores-ocultos .linha em,
.valores-ocultos .pg-resumo b{filter:blur(8px); user-select:none; transition:filter .18s}

/* Guia de primeiro uso: o que não está em destaque fica desfocado */
.tour{position:fixed; inset:0; z-index:60}
.tour__veu{position:absolute; inset:0; background:rgba(12,24,33,.46); -webkit-backdrop-filter:blur(5px) saturate(.8); backdrop-filter:blur(5px) saturate(.8); animation:rota-fundo .22s ease-out}
.tour__bloqueio{position:absolute; inset:0; touch-action:none}
.tour__anel{position:absolute; pointer-events:none; box-shadow:0 0 0 2px var(--our2), 0 0 0 7px rgba(238,215,172,.28)}
.tour__balao{position:absolute; background:#fff; border-radius:24px; padding:16px 20px 16px; box-shadow:0 24px 56px -14px rgba(12,24,33,.6); outline:none; transition:top .26s var(--suave), left .26s var(--suave)}
.tour__prog{height:4px; border-radius:2px; background:#ECEFED; overflow:hidden; margin:2px 0 10px}
.tour__prog i{display:block; height:100%; border-radius:2px; background:var(--our2); transition:width .26s var(--suave)}
.tour__num{display:block; font-size:12px; font-weight:500; color:var(--ouro-tx); margin-bottom:2px}
.tour__balao h2{font-size:20px; line-height:1.2; margin:0 0 6px}
.tour__balao p{margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--tx)}
.tour__bts{display:flex; align-items:center; justify-content:flex-end; gap:8px}
.tour__bts .bt{min-height:44px; padding:0 16px; font-size:14px}
.tour__pular{margin-right:auto; min-height:44px; padding:0 8px 0 0; border:0; background:none; color:var(--cz); font-size:14px; font-weight:500}
.ajuda__i{display:block; width:100%; text-align:left; border:0; background:none; padding:12px 0; border-bottom:1px solid #F1F2F0; color:var(--tx)}
.ajuda__i:last-child{border-bottom:0}
.ajuda__i b{display:block; font-weight:600; color:var(--pet); font-size:14.5px; margin-bottom:2px}
.ajuda__i small{display:block; font-size:13px; line-height:1.45; color:var(--cz)}
@media (prefers-reduced-motion:reduce){ .tour__veu{animation:none} .tour__balao,.tour__prog i{transition:none} }

/* Recuperação de senha e telefones */
.login__links{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:12px}
.login__links .link{min-height:40px; padding:0 8px; font-size:14px}
.login__links .link:disabled{color:var(--cz); text-decoration:none; opacity:1}
.codigo-in{text-transform:uppercase; letter-spacing:.22em; text-align:center; font-weight:600; font-size:20px!important; font-variant-numeric:tabular-nums}
.tel-principal{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px; font-size:12.5px; color:var(--cz)}
.tel-pend__acoes .bt-mini{text-decoration:none; color:var(--our); min-height:38px; margin-top:4px}
.tel-pend__acoes a.bt-mini{margin-left:0}

/* Acessos: número de recuperação de cada pessoa */
.acesso-p{align-items:flex-start}
.acesso-p > div:first-child{flex:1; min-width:0}
.acesso-wa{display:block; margin-top:8px; max-width:280px}
.acesso-wa span{display:block; font-size:12.5px; color:var(--cz); margin-bottom:4px}
.acesso-wa select{width:100%; min-height:44px; padding:0 10px; border:0; border-radius:var(--r-p); background:#F2F3F1; font:inherit; font-size:14px}
@media (pointer:coarse){ .acesso-wa select{font-size:16px} }
.acesso-p{flex-wrap:wrap} .acesso-p > div:first-child{flex:1 1 230px}

/* Atualizar: botão e puxar a tela para baixo */
.sino{border:0; padding:0}
@keyframes rota-gira{to{transform:rotate(360deg)}}
.sino.gira svg{animation:rota-gira .8s linear infinite}
#puxar{position:fixed; top:calc(-44px + env(safe-area-inset-top)); left:50%; z-index:15; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--cz); box-shadow:var(--sombra-menu); transform:translate(-50%, 0); transition:transform .2s var(--suave); pointer-events:none}
#puxar.ativo{transition:none}
#puxar.pronto{color:var(--pet)}
#puxar svg{width:22px; height:22px}
#puxar.girando{transition:transform .2s var(--suave)}
#puxar.girando svg{color:var(--pet); animation:rota-gira .8s linear infinite}
@media (max-width:440px){ .topo{flex-wrap:wrap; row-gap:10px} .topo__dir{margin-left:auto} }
@media (prefers-reduced-motion:reduce){ .sino.gira svg,#puxar.girando svg{animation:none} }

/* Acessos no celular: cada pessoa vira um bloco, com as ações à vista, sem rolar a tabela para o lado. */
@media (max-width: 640px) {
  .tabela.tabela-acessos { min-width: 0; }
  .tabela-acessos thead { display: none; }
  .tabela-acessos, .tabela-acessos tbody, .tabela-acessos tr, .tabela-acessos td { display: block; width: 100%; }
  .tabela-acessos tr { padding: 14px 0; border-bottom: 1px solid var(--borda, #e6e6e6); }
  .tabela-acessos tr:last-child { border-bottom: 0; }
  .tabela-acessos td { border: 0; padding: 3px 0; white-space: normal; }
  .tabela-acessos td:empty { display: none; }
  .tabela-acessos td.acoes-u { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
}

/* Recorrência: três opções cabem na largura do celular */
.rec-modo{width:100%; max-width:100%}
.rec-modo button{padding:0 6px; font-size:12.5px; line-height:1.15; white-space:normal}
.rec-ate[hidden], .rec-longa[hidden]{display:none !important}

/* Horário do aviso de conta que vence hoje, logo abaixo do interruptor */
.alerta-hora{margin:-4px 0 14px; padding-left:2px}
.alerta-hora small{display:block; margin-top:6px}