/* Novo layout 4orma (2026-10). Vale para o tema claro; o tema escuro mantém o visual anterior (seletores com :root:not([data-tema="escuro"])). */
/* Direção: menos moldura, mais conteúdo. Rosa vira acento, não borda. Carregado depois de styles.css. */
:root:not([data-tema="escuro"]){
 --bg:#F6F4F1;--card:#FFFFFF;--ink:#1F1D1C;--muted:#77706B;--line:#ECE6E0;--line-forte:#DED6CF;
 --soft:#F1EDE9;--nav:#2F2F2F;--rose:#E7AFA8;--rose-dark:#C2685D;--rose-bg:#FBEDEA;--rose-tx:#8A3B31;
 --good:#2F7A57;--warn:#8B5D08;--bad:#A23A3A;
 --raio:14px;--raio-sm:10px;--sombra:0 1px 2px rgba(31,29,28,.05),0 1px 1px rgba(31,29,28,.03);
 --sombra-alta:0 12px 32px -12px rgba(31,29,28,.28),0 2px 6px rgba(31,29,28,.06);
}
:root:not([data-tema="escuro"]) body{background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}

/* ---------- Casca: barra superior fina ---------- */
:root:not([data-tema="escuro"]) header{position:sticky;top:0;z-index:30;padding:0 24px!important;height:56px;display:flex;align-items:center;background:var(--nav);border-bottom:0!important;box-shadow:0 1px 0 rgba(255,255,255,.04)}
:root:not([data-tema="escuro"]) header .brand{max-width:none!important;width:100%;gap:16px!important;margin:0!important}
:root:not([data-tema="escuro"]) header .brand-logo{width:96px!important;max-width:none!important}
:root:not([data-tema="escuro"]) header h1{font-size:13px!important;font-weight:600;color:#D9D2CC;letter-spacing:.01em;padding-left:16px;border-left:1px solid #3A3634}
:root:not([data-tema="escuro"]) header .brand p{display:none}
:root:not([data-tema="escuro"]) header .brand>div:nth-child(2){flex:1}

/* ---------- Casca: menu lateral ---------- */
@media(min-width:801px){
 :root:not([data-tema="escuro"]) main{max-width:1480px!important;margin:0 auto!important;padding:24px 28px 120px!important;grid-template-columns:224px minmax(0,1fr)!important;column-gap:32px!important}
 :root:not([data-tema="escuro"]) main.nav-collapsed{grid-template-columns:64px minmax(0,1fr)!important}
 :root:not([data-tema="escuro"]) #mainNav{top:80px!important;background:transparent!important;border:0!important;padding:0!important;gap:2px!important}
 :root:not([data-tema="escuro"]) #mainNav button{padding:9px 12px!important;min-height:38px!important;font-size:13.5px!important;font-weight:500!important;color:#4A4542!important;background:transparent!important;border:0!important;border-radius:9px!important;box-shadow:none!important}
 :root:not([data-tema="escuro"]) #mainNav button:hover{background:#ECE7E2!important;color:var(--ink)!important}
 :root:not([data-tema="escuro"]) #mainNav button.active{background:var(--card)!important;color:var(--ink)!important;font-weight:650!important;box-shadow:var(--sombra),inset 3px 0 0 var(--rose-dark)!important}
 :root:not([data-tema="escuro"]) #mainNav button svg{width:18px!important;height:18px!important;stroke-width:1.6!important;opacity:.85}
 :root:not([data-tema="escuro"]) #mainNav button.active svg{color:var(--rose-dark);opacity:1}
 :root:not([data-tema="escuro"]) #mainNav .nav-collapse{border-bottom:0!important;color:var(--muted)!important;font-size:12px!important;margin-bottom:8px!important}
 :root:not([data-tema="escuro"]) #mainNav .nav-sub{margin:2px 0 4px 10px;padding-left:8px;border-left:1px solid var(--line-forte)}
}

/* ---------- Títulos de seção ---------- */
:root:not([data-tema="escuro"]) .secao-topo{margin:0 0 20px!important;align-items:flex-end!important}
:root:not([data-tema="escuro"]) .secao-titulo h2,:root:not([data-tema="escuro"]) .secao-topo h2{font-size:24px!important;font-weight:700;letter-spacing:-.015em;margin:0!important}
:root:not([data-tema="escuro"]) .secao-titulo p{margin:4px 0 0;color:var(--muted);font-size:13px}

/* ---------- Cartões ---------- */
:root:not([data-tema="escuro"]) .card{border:1px solid var(--line)!important;border-top:1px solid var(--line)!important;border-radius:var(--raio)!important;box-shadow:var(--sombra)!important;padding:22px!important;margin-bottom:16px}
:root:not([data-tema="escuro"]) h3,:root:not([data-tema="escuro"]) .titulo-card{color:var(--ink)!important;font-size:15px!important;font-weight:700;letter-spacing:-.005em;margin:0 0 14px}
:root:not([data-tema="escuro"]) h2{color:var(--ink)}

/* Lista de propostas e quadros: sem moldura em volta do quadro (evita cartão dentro de cartão) */
:root:not([data-tema="escuro"]) #propListaArea>.card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
:root:not([data-tema="escuro"]) #propListaArea .filtros-desejo{margin-bottom:14px}

/* ---------- Botões ---------- */
:root:not([data-tema="escuro"]) button{border-radius:var(--raio-sm);font-weight:600;padding:9px 14px;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
:root:not([data-tema="escuro"]) button:active{transform:translateY(1px)}
:root:not([data-tema="escuro"]) button:hover{filter:none}
:root:not([data-tema="escuro"]) .primary{background:var(--ink);color:#fff;border:1px solid var(--ink);border-bottom:1px solid var(--ink)!important}
:root:not([data-tema="escuro"]) .primary:hover{background:#000}
:root:not([data-tema="escuro"]) .secondary{background:var(--card);color:var(--ink);border:1px solid var(--line-forte)}
:root:not([data-tema="escuro"]) .secondary:hover{background:var(--soft);border-color:#CFC6BE}
:root:not([data-tema="escuro"]) .danger{background:#fff;color:var(--bad);border:1px solid #EBCACA}
:root:not([data-tema="escuro"]) .danger:hover{background:#FBEFEF}
:root:not([data-tema="escuro"]) button:focus-visible,:root:not([data-tema="escuro"]) a:focus-visible{outline:2px solid var(--rose-dark);outline-offset:2px}

/* ---------- Campos ---------- */
:root:not([data-tema="escuro"]) label{font-size:12px;font-weight:600;color:#5E5752}
:root:not([data-tema="escuro"]) input,:root:not([data-tema="escuro"]) select,:root:not([data-tema="escuro"]) textarea{border:1px solid #E1D9D2;border-radius:var(--raio-sm);padding:9px 11px;min-height:40px;background:#fff;transition:border-color .15s,box-shadow .15s}
:root:not([data-tema="escuro"]) input:hover,:root:not([data-tema="escuro"]) select:hover,:root:not([data-tema="escuro"]) textarea:hover{border-color:#CFC6BE}
:root:not([data-tema="escuro"]) input:focus,:root:not([data-tema="escuro"]) select:focus,:root:not([data-tema="escuro"]) textarea:focus{outline:none!important;border-color:var(--rose-dark)!important;box-shadow:0 0 0 3px #F5D9D4}
:root:not([data-tema="escuro"]) .hint{color:var(--muted)}

/* ---------- Indicadores ---------- */
:root:not([data-tema="escuro"]) .stat{border:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;border-radius:var(--raio)!important;padding:16px 18px!important;box-shadow:var(--sombra)}
:root:not([data-tema="escuro"]) .stat span{font-size:11px!important;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted)}
:root:not([data-tema="escuro"]) .stat strong{font-size:24px!important;font-weight:700;letter-spacing:-.02em;margin-top:6px!important}

/* ---------- Chips e etiquetas ---------- */
:root:not([data-tema="escuro"]) .chip{background:#fff;border:1px solid var(--line-forte);color:#4A4542;font-weight:600}
:root:not([data-tema="escuro"]) .chip:hover{background:var(--soft)}
:root:not([data-tema="escuro"]) .chip.ativo{background:var(--rose-bg)!important;border-color:var(--rose-dark)!important;color:var(--rose-tx)!important;box-shadow:none!important}
:root:not([data-tema="escuro"]) .pill{font-weight:600;letter-spacing:.01em}

/* ---------- Tabelas ---------- */
:root:not([data-tema="escuro"]) th{font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-forte)}
:root:not([data-tema="escuro"]) td{border-bottom-color:var(--line)}
:root:not([data-tema="escuro"]) tbody tr:hover td{background:#FBFAF8}

/* ---------- Quadros (kanban) ---------- */
:root:not([data-tema="escuro"]) .quadro{gap:14px!important}
:root:not([data-tema="escuro"]) .coluna,:root:not([data-tema="escuro"]) .coluna[class*="tom-"]{background:#EFEBE7!important;border:0!important;border-radius:var(--raio)!important;padding:10px!important;gap:10px!important}
:root:not([data-tema="escuro"]) .coluna h4{font-size:12px!important;text-transform:uppercase;letter-spacing:.05em;color:#4A4542!important;margin:4px 6px 2px!important}
:root:not([data-tema="escuro"]) .coluna h4 .pill{background:#fff;color:var(--ink)}
:root:not([data-tema="escuro"]) .coluna-soma{color:var(--muted)!important;font-weight:600;margin:0 6px}
:root:not([data-tema="escuro"]) .ponto{width:8px!important;height:8px!important}
:root:not([data-tema="escuro"]) .cartao{border:1px solid transparent!important;border-radius:12px!important;padding:12px!important;box-shadow:0 1px 2px rgba(31,29,28,.06);gap:8px!important;transition:box-shadow .15s,border-color .15s}
:root:not([data-tema="escuro"]) .cartao:hover{box-shadow:0 6px 16px -8px rgba(31,29,28,.25);border-color:var(--line)!important}
:root:not([data-tema="escuro"]) .cartao h5{font-size:13.5px!important;font-weight:650}
:root:not([data-tema="escuro"]) .cartao .primary{background:var(--ink)}
:root:not([data-tema="escuro"]) .coluna .vazia{border:1px dashed #D6CEC6!important;background:transparent!important;color:var(--muted)!important;border-radius:12px}

/* ---------- Proposta: peças e blocos ---------- */
:root:not([data-tema="escuro"]) .item-prop{border:1px solid var(--line)!important;border-radius:var(--raio)!important;padding:18px!important;background:#fff}
:root:not([data-tema="escuro"]) .bloco{border:1px solid var(--line)!important;border-radius:12px!important;padding:14px 16px!important;background:#FCFBFA!important}
:root:not([data-tema="escuro"]) .bloco h5{color:var(--muted)!important;font-weight:700;letter-spacing:.06em}
:root:not([data-tema="escuro"]) .bloco-preco{background:#fff!important;border-color:var(--line-forte)!important}
:root:not([data-tema="escuro"]) .dicas{border-radius:var(--raio-sm)!important}
:root:not([data-tema="escuro"]) .dropzone{border:1.5px dashed #D3C7BE!important;background:#FCFAF8!important;border-radius:12px!important;color:#4A4542}
:root:not([data-tema="escuro"]) .dropzone:hover{border-color:var(--rose-dark)!important;background:var(--rose-bg)!important}

/* ---------- Proposta: barra de resumo fixa no rodapé ---------- */
:root:not([data-tema="escuro"]) #propEditor .resumo-prop{position:sticky;bottom:16px;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"stats total" "acoes acoes" "msg msg";gap:10px 20px;align-items:center;box-shadow:var(--sombra-alta)!important;border-color:var(--line-forte)!important;padding:14px 20px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:saturate(1.2) blur(8px)}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop>.titulo-card{display:none}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo{grid-area:stats;display:flex!important;gap:24px;margin:0!important;flex-wrap:wrap}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo .stat{border:0!important;box-shadow:none!important;padding:0!important;background:transparent}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo .stat strong{font-size:16px!important;margin-top:2px!important}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo .stat small{display:none!important}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo{flex-wrap:nowrap!important;gap:28px!important;overflow:hidden}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo .stat{white-space:nowrap;min-width:0}
:root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo .stat span{font-size:10.5px!important}
:root:not([data-tema="escuro"]) #propEditor .total-prop{grid-area:total;margin:0!important;background:transparent!important;color:var(--ink)!important;border:0!important;padding:0!important;display:block!important;text-align:right}
:root:not([data-tema="escuro"]) #propEditor .total-prop span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted)}
:root:not([data-tema="escuro"]) #propEditor .total-prop strong{font-size:30px!important;font-weight:750;letter-spacing:-.02em}
:root:not([data-tema="escuro"]) #propEditor .acoes-prop{grid-area:acoes;gap:8px!important;padding-top:10px;border-top:1px solid var(--line)}
:root:not([data-tema="escuro"]) #propEditor .acoes-prop button:nth-child(n+4){background:transparent;border-color:transparent;color:#5E5752;font-weight:600;padding:9px 10px}
:root:not([data-tema="escuro"]) #propEditor .acoes-prop button:nth-child(n+4):hover{background:var(--soft)}
:root:not([data-tema="escuro"]) #propEditor .acoes-prop button:nth-child(4){margin-left:auto}
:root:not([data-tema="escuro"]) #propEditor #peMsg{grid-area:msg;margin:0;min-height:0}
:root:not([data-tema="escuro"]) #propEditor #peMsg:empty{display:none}
:root:not([data-tema="escuro"]) #propEditor .editor-topo{margin-bottom:16px!important}
:root:not([data-tema="escuro"]) body.perfil-vendas #propEditor .resumo-prop{grid-template-areas:"total total" "acoes acoes" "msg msg"}
:root:not([data-tema="escuro"]) body.perfil-vendas #propEditor .total-prop{text-align:left}

/* ---------- Telas pequenas ---------- */
@media(max-width:800px){
 :root:not([data-tema="escuro"]) header{height:52px;padding:0 14px!important}
 :root:not([data-tema="escuro"]) header h1{display:none}
 :root:not([data-tema="escuro"]) main{padding:14px 14px 140px!important}
 :root:not([data-tema="escuro"]) .card{padding:16px!important}
 :root:not([data-tema="escuro"]) .secao-titulo h2,:root:not([data-tema="escuro"]) .secao-topo h2{font-size:20px!important}
 :root:not([data-tema="escuro"]) #mainNav{border-bottom:1px solid var(--line)!important}
 :root:not([data-tema="escuro"]) #mainNav button.active{box-shadow:inset 0 -2px 0 var(--rose-dark)!important;background:transparent!important}
 :root:not([data-tema="escuro"]) #propEditor .resumo-prop{bottom:8px;grid-template-columns:1fr;grid-template-areas:"total" "acoes" "msg";padding:12px 14px!important}
 :root:not([data-tema="escuro"]) #propEditor .resumo-prop #peResumo{display:none!important}
 :root:not([data-tema="escuro"]) #propEditor .total-prop{text-align:left}
 :root:not([data-tema="escuro"]) #propEditor .acoes-prop{flex-wrap:nowrap;overflow-x:auto}
 :root:not([data-tema="escuro"]) #propEditor .acoes-prop button:nth-child(4){margin-left:0}
}

/* Correção: no celular a coluna da peça esticava além da tela (tabela de insumos e seletores com texto longo) */
.item-corpo>div{min-width:0}
.item-corpo select{max-width:100%;text-overflow:ellipsis}
.bloco{min-width:0;overflow-x:auto}
@media(max-width:600px){.tabela-insumos{min-width:0!important}.tabela-insumos th,.tabela-insumos td{padding:6px 4px}}
/* Celular: selo "Salvo" não quebra a barra superior */
@media(max-width:800px){header .brand{flex-wrap:nowrap!important;justify-content:space-between}header .brand>div:last-child{flex:0 0 auto}header .pill,header [class*="sync"]{font-size:10px!important;padding:3px 8px!important;white-space:nowrap}}
@media(max-width:800px){header .session{width:auto!important;min-width:0!important;flex:0 0 auto!important;margin:0 0 0 auto!important;position:static!important}header .brand>div:nth-child(2){display:none}}