/* ---------- estrutura: menu lateral + conteúdo ---------- */
.lateral{
  position:fixed; inset:0 auto 0 0; width:232px; z-index:40;
  background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 14px 16px; overflow-y:auto;
}
.lateral .marca{display:block; padding:0 10px 22px;}
.lateral .marca img{height:26px; width:auto;}
.menu{display:flex; flex-direction:column; gap:2px; flex:1;}
.menu .grupo{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:16px 10px 6px;}
.menu a{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; color:var(--fg-2); text-decoration:none; font-size:14px; transition:background .15s, color .15s;}
.menu a:hover{background:var(--bg-3); color:var(--fg);}
.menu a.ativo{background:var(--fg); color:var(--bg);}
.menu .ic{width:18px; text-align:center; font-size:13px; opacity:.85;}
.versao{font-size:11px; color:var(--fg-3); padding:14px 10px 0; line-height:1.4;}
.versao a, .versao button{font:inherit; color:var(--fg-2); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.versao a:hover, .versao button:hover{color:var(--fg);}
.principal{margin-left:232px; min-height:100vh;}
.barra-topo{
  position:sticky; top:0; z-index:20; height:62px; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:0 28px; background:rgba(12,12,11,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.btn-menu{display:none; background:none; border:0; width:40px; height:40px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0 9px;}
.btn-menu span{display:block; height:1.5px; background:var(--fg);}
.marca-movel{display:none; height:22px; width:auto; margin-right:auto;}
.veu{display:none;}
main{padding:32px 28px 90px; max-width:1320px;}
@media (max-width:900px){
  .lateral{transform:translateX(-100%); transition:transform .3s var(--ease); box-shadow:0 0 40px rgba(0,0,0,.5);}
  .menu-aberto .lateral{transform:none;}
  .menu-aberto .veu{display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5);}
  .principal{margin-left:0;}
  .btn-menu{display:flex;}
  .marca-movel{display:block;}
  .barra-topo{padding:0 12px; justify-content:space-between;}
  main{padding:22px 16px 90px;}
}

/* menu "+ Novo" */
.novo{position:relative;}
.novo-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:50;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.novo-menu button{display:block; width:100%; text-align:left; background:none; border:0; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--fg-2);}
.novo-menu button:hover{background:var(--bg-3); color:var(--fg);}

/* ---------- elementos comuns das telas ---------- */
.cabecalho{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.cabecalho h1{font-size:clamp(34px, 4.6vw, 50px);}
.acoes{display:flex; gap:8px; flex-wrap:wrap;}
.voltar{display:inline-flex; gap:8px; color:var(--fg-3); text-decoration:none; font-size:14px; margin-bottom:18px;}
.voltar:hover{color:var(--fg);}
.vazio{text-align:center; padding:64px 20px; border:1px dashed var(--line); border-radius:var(--radius);}
.vazio h2{font-size:32px; margin-bottom:8px;}
.vazio p{color:var(--fg-2); margin-bottom:22px; max-width:46ch; margin-left:auto; margin-right:auto;}
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--fg-2); font-size:13px; cursor:pointer; white-space:nowrap;}
.chip[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.ferramentas{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.busca{max-width:320px; flex:1; min-width:200px;}
.secao{margin-bottom:28px;}
.secao > h2{font-size:28px; margin-bottom:14px;}
.duas{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:980px){ .duas{grid-template-columns:1fr;} }
.tag{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px; background:var(--bg-3); color:var(--fg-2); margin:2px 4px 2px 0;}
.tag.ouro{background:rgba(230,211,172,.16); color:var(--accent);}
.tag.verde{background:rgba(159,211,168,.14); color:var(--ok);}
.tag.vermelho{background:rgba(240,163,163,.14); color:var(--erro);}
.valor-pos{color:var(--ok);}
.valor-neg{color:var(--erro);}
.link{color:var(--fg); text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; cursor:pointer; background:none; border:0; padding:0; font:inherit;}
.link:hover{text-decoration-color:var(--fg);}

/* indicadores */
.kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:28px;}
@media (max-width:980px){ .kpis{grid-template-columns:1fr 1fr;} }
.kpi{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; text-decoration:none; display:block;}
a.kpi:hover{border-color:rgba(242,239,233,.3);}
.kpi span{display:block; font-size:12.5px; color:var(--fg-3); margin-bottom:8px;}
.kpi b{display:block; font-family:'Instrument Serif', serif; font-weight:400; font-size:34px; line-height:1;}
.kpi small{display:block; margin-top:8px; font-size:12.5px; color:var(--fg-2);}
@media (max-width:560px){ .kpi{padding:14px;} .kpi b{font-size:26px;} }

/* tabelas */
.tabela-wrap{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto;}
table.tabela{width:100%; border-collapse:collapse; font-size:14px;}
.tabela th{text-align:left; font-weight:500; font-size:12px; color:var(--fg-3); letter-spacing:.04em; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
.tabela td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
.tabela tr:last-child td{border-bottom:0;}
.tabela tbody tr:hover{background:rgba(242,239,233,.025);}
.tabela .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.tabela .acao{text-align:right; white-space:nowrap;}
.tabela tfoot td{font-weight:600; border-top:1px solid var(--line);}
.clicavel{cursor:pointer;}
@media (max-width:700px){
  .tabela.responsiva thead{display:none;}
  .tabela.responsiva tr{display:block; padding:12px 14px; border-bottom:1px solid var(--line);}
  .tabela.responsiva td{display:flex; justify-content:space-between; gap:12px; padding:3px 0; border:0; text-align:right;}
  .tabela.responsiva td::before{content:attr(data-r); color:var(--fg-3); font-size:12.5px; text-align:left;}
  .tabela.responsiva td.principal-cel{font-weight:500; text-align:left;}
  .tabela.responsiva td.principal-cel::before{display:none;}
}

/* listas simples (tarefas, próximos eventos) */
.lista-itens{list-style:none; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);}
.lista-itens li{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px;}
.lista-itens li:last-child{border-bottom:0;}
.lista-itens .quando{font-size:12.5px; color:var(--fg-3); white-space:nowrap; min-width:74px;}
.lista-itens .texto{flex:1; min-width:0;}
.lista-itens .texto small{display:block; color:var(--fg-3); font-size:12.5px;}
.lista-itens .vazia{color:var(--fg-3); justify-content:center; padding:22px;}
.feita .texto{text-decoration:line-through; color:var(--fg-3);}
.caixa{width:20px; height:20px; accent-color:var(--accent); flex:none; cursor:pointer;}
.atrasada{color:var(--erro) !important;}

/* ---------- funil (kanban) ---------- */
.funil{scrollbar-color:var(--bg-3) transparent; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; padding-bottom:12px; align-items:start;}
.coluna{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; min-height:200px; transition:border-color .2s, background .2s;}
.coluna.sobre{border-color:var(--accent); background:rgba(230,211,172,.04);}
.coluna-topo{display:flex; justify-content:space-between; align-items:baseline; padding:4px 4px 12px;}
.coluna-topo h3{font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.coluna-topo span{font-size:12px; color:var(--fg-3);}
.coluna .total{font-size:12.5px; color:var(--fg-2); padding:0 4px 10px;}
.cartao{background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:12px 13px; margin-bottom:8px; cursor:grab; transition:border-color .2s, transform .2s;}
.cartao:hover{border-color:rgba(242,239,233,.3);}
.cartao.arrastando{opacity:.4;}
.cartao h4{font-size:14px; font-weight:500; margin-bottom:3px;}
.cartao p{font-size:12.5px; color:var(--fg-3);}
.cartao .linha{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px;}
.cartao .valor{font-weight:500;}
.cartao .mover{display:none; margin-top:8px; width:100%;}
@media (hover:none){ .cartao .mover{display:block;} .cartao{cursor:default;} }

/* ---------- agenda (calendário) ---------- */
.cal-topo{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.cal-topo h2{font-size:30px; min-width:250px;}
.calendario{display:grid; grid-template-columns:repeat(7, 1fr); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.calendario .dsem{padding:10px; font-size:11.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); text-align:center;}
.dia{min-height:112px; padding:6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; overflow:hidden;}
.dia:nth-child(7n){border-right:0;}
.dia:hover{background:rgba(242,239,233,.025);}
.dia .n{font-size:12.5px; color:var(--fg-2); display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; margin-bottom:4px;}
.dia.fora .n{color:var(--fg-3); opacity:.5;}
.dia.hoje .n{background:var(--accent); color:var(--bg); font-weight:600;}
.ev{display:block; font-size:11.5px; padding:2px 6px; border-radius:5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--bg-3); color:var(--fg-2);}
.ev.evento{background:rgba(230,211,172,.18); color:var(--accent);}
.ev.tarefa{background:rgba(160,190,240,.14); color:#b8cdf2;}
.ev.compromisso{background:rgba(159,211,168,.14); color:var(--ok);}
.ev.financeiro{background:rgba(240,163,163,.12); color:var(--erro);}
.legenda{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--fg-3);}
.legenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
@media (max-width:700px){
  .dia{min-height:62px; padding:3px;}
  .ev{font-size:0; height:6px; padding:0; margin:2px 0;}
  .cal-topo h2{min-width:0; font-size:24px;}
}

/* ---------- propostas ---------- */
.itens-proposta{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:12px;}
.itens-proposta td, .itens-proposta th{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top;}
.itens-proposta th{font-weight:500; font-size:12px; color:var(--fg-3); text-align:left;}
.itens-proposta input{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px;}
.itens-proposta .q{width:70px;} .itens-proposta .v{width:130px;}
.totais{margin-left:auto; max-width:320px; font-size:14px;}
.totais div{display:flex; justify-content:space-between; padding:5px 0; color:var(--fg-2);}
.totais .grande{font-size:20px; color:var(--fg); border-top:1px solid var(--line); padding-top:10px; margin-top:4px;}
.catalogo{max-height:360px; overflow:auto; margin:-4px 0 4px;}
.catalogo h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin:14px 0 6px; font-weight:500;}
.catalogo button{display:flex; justify-content:space-between; gap:14px; width:100%; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 12px; margin-bottom:5px; cursor:pointer; font-size:13.5px;}
.catalogo button:hover{border-color:var(--accent);}
.catalogo button small{display:block; color:var(--fg-3); font-size:12px;}

/* gráfico de barras (relatórios) */
/* cores validadas para daltonismo e contraste no fundo escuro */
.grafico{--c-rec:#c98500; --c-desp:#3987e5; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; align-items:end; height:220px; padding:10px 6px 0; border-bottom:1px solid var(--fg-3); position:relative;
  background:linear-gradient(to bottom, transparent 9px, rgba(242,239,233,.08) 9px 10px, transparent 10px 114px, rgba(242,239,233,.08) 114px 115px, transparent 115px);}
.grafico .mes{display:flex; gap:2px; align-items:end; height:100%; justify-content:center; position:relative; cursor:default;}
.grafico .mes:hover{background:rgba(242,239,233,.04); border-radius:6px 6px 0 0;}
.grafico .barra{width:min(24px, 40%); border-radius:4px 4px 0 0; min-height:2px; transition:height .5s var(--ease);}
.grafico .rec{background:var(--c-rec);}
.grafico .desp{background:var(--c-desp);}
.dica{position:absolute; bottom:calc(100% + 6px); left:50%; translate:-50% 0; background:var(--fg); color:var(--bg); font-size:12px; padding:7px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; z-index:5; line-height:1.5;}
.grafico .mes:hover .dica{opacity:1;}
.grafico .eixo{position:absolute; left:0; font-size:11px; color:var(--fg-3); translate:0 -50%; pointer-events:none;}
.grafico{padding-left:64px;}
.rotulos{padding-left:64px !important;}
.legenda-graf{display:flex; gap:16px; font-size:12.5px; color:var(--fg-2); margin-bottom:10px;}
.legenda-graf i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
.rotulos{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; padding:8px 6px 0; font-size:12px; color:var(--fg-3); text-align:center; text-transform:capitalize;}

/* ---------- seleção de fotos (trabalhos) ---------- */
.resumo{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:28px;}
.resumo .card{padding:18px 20px;}
.resumo b{display:block; font-family:'Instrument Serif', serif; font-weight:400; font-size:36px; line-height:1;}
.resumo span{font-size:13px; color:var(--fg-3);}
.lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.job{display:block; text-decoration:none; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, transform .3s var(--ease);}
.job:hover{border-color:rgba(242,239,233,.3); transform:translateY(-2px);}
.job .capa{aspect-ratio:16/10; background:var(--bg-3); display:grid; place-items:center; color:var(--fg-3); font-size:13px; overflow:hidden;}
.job .capa img{width:100%; height:100%; object-fit:cover;}
.job .info{padding:16px 18px 18px;}
.job h3{font-size:24px; margin-bottom:4px;}
.job .meta{font-size:13px; color:var(--fg-3); margin-bottom:12px;}
.job .rodape{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; color:var(--fg-2);}
.det-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.det-topo h1{font-size:clamp(34px, 4.6vw, 52px); margin:8px 0 6px;}
.paineis{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:26px;}
.paineis.largo{grid-template-columns:1.5fr 1fr;}
@media (max-width:1180px){ .paineis.largo{grid-template-columns:1fr;} }
@media (max-width:980px){ .paineis{grid-template-columns:1fr;} }
.card h2{font-size:26px; margin-bottom:6px;}
.card > p{color:var(--fg-2); font-size:14px; margin-bottom:16px;}
.acesso{display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; margin-bottom:16px;}
.acesso .input{font-size:13.5px; color:var(--fg-2);}
.codigo{font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size:24px; letter-spacing:.18em; color:var(--accent);}
.botoes{display:flex; gap:8px; flex-wrap:wrap;}
.progresso{height:8px; background:var(--bg-3); border-radius:99px; overflow:hidden; margin:14px 0 8px;}
.progresso i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s var(--ease);}
.numeros{display:flex; justify-content:space-between; font-size:13.5px; color:var(--fg-2); margin-bottom:16px;}
.numeros b{font-family:'Instrument Serif', serif; font-weight:400; font-size:34px; color:var(--fg); margin-right:4px;}
.comentarios{list-style:none; display:grid; gap:8px; margin-top:16px; font-size:13.5px;}
.comentarios li{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--fg-2);}
.comentarios b{color:var(--fg); font-weight:500;}
.zona{border:1.5px dashed rgba(242,239,233,.25); border-radius:var(--radius); padding:32px 20px; text-align:center; transition:border-color .2s, background .2s; cursor:pointer; margin-bottom:20px;}
.zona:hover, .zona.sobre{border-color:var(--accent); background:rgba(230,211,172,.05);}
.zona h3{font-size:26px; margin-bottom:6px;}
.zona p{color:var(--fg-3); font-size:13.5px;}
.zona .barra{max-width:420px; margin:16px auto 0;}
.fotos-topo{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.fotos-topo h2{font-size:30px;}
.grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
.grade figure{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg-3);}
.grade img{width:100%; height:100%; object-fit:cover;}
.grade figcaption{position:absolute; left:0; right:0; bottom:0; padding:18px 8px 6px; font-size:11.5px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.7)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.grade .sel{position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:50%; background:var(--accent); display:grid; place-items:center;}
.grade .sel svg{width:15px; height:15px; fill:var(--bg); stroke:var(--bg); stroke-width:2;}
.grade .nota{position:absolute; top:8px; left:42px; height:28px; padding:0 9px; border-radius:99px; background:rgba(12,12,11,.7); font-size:11px; display:grid; place-items:center;}
.grade .apagar{position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(12,12,11,.7); color:#fff; cursor:pointer; opacity:0; transition:opacity .2s;}
.grade figure:hover .apagar, .grade .apagar:focus-visible{opacity:1;}
@media (hover:none){ .grade .apagar{opacity:1;} }

/* ---------- contratos ---------- */
.grupos-contrato{display:grid; gap:16px;}
.grupo-contrato > header{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:10px;}
.grupo-contrato h3{font-size:24px; margin:2px 0;}
.aviso-contrato{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; border-color:rgba(230,211,172,.35);}
.aviso-contrato p{margin:0; color:var(--fg-2); font-size:14px; flex:1; min-width:240px;}
.editor-contrato{width:100%; min-height:520px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font:14px/1.6 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; resize:vertical; margin-bottom:12px;}
.editor-contrato:focus{outline:none; border-color:rgba(242,239,233,.35);}
.campos-modelo{list-style:none; display:grid; gap:4px;}
.campos-modelo button{display:block; width:100%; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 10px; cursor:pointer;}
.campos-modelo button:hover{border-color:var(--accent);}
.campos-modelo code{font-size:12.5px; color:var(--accent);}
.campos-modelo small{display:block; font-size:12px; color:var(--fg-3);}
.campos-modelo.marcacao li{padding:4px 0;}
.calc-parcelas{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
@media (max-width:640px){ .calc-parcelas{grid-template-columns:1fr 1fr;} }
.aviso-soma{color:var(--erro); font-size:13px; margin-bottom:10px;}
.aviso-soma:empty{display:none;}
.modal .folha-contrato{box-shadow:none; padding:32px 28px;}

/* ---------- entrega de fotos ---------- */
.conferencia{margin-top:16px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-size:13.5px; color:var(--fg-2);}
.conferencia b{font-family:'Instrument Serif', serif; font-weight:400; font-size:22px; color:var(--fg);}
.conferencia p{margin:6px 0 0; font-size:13px;}
.conferencia.ok{border-color:rgba(159,211,168,.35);}
.conferencia.ok p{color:var(--ok);}
.conferencia.falta{border-color:rgba(240,163,163,.35);}
.conferencia.falta p{color:var(--erro);}

/* ---------- acesso do cliente (e-mail e senha) ---------- */
.acesso-cliente{font-size:13.5px; color:var(--fg-2); margin:-4px 0 16px; padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line);}
.acesso-cliente.ok{border-color:rgba(159,211,168,.35); color:var(--ok);}
.acesso-cliente.ok b{color:var(--fg); font-weight:500;}
.acesso-cliente.alerta{border-color:rgba(240,163,163,.4); color:var(--erro);}