/* orcamento.css — orçamento: formulário e documento
   Cortado de index.html por scripts/cortar-css.js. A ORDEM dos <link> no
   index.html é a ordem original do arquivo e não pode mudar: em CSS quem
   vem depois ganha. O grupo `css` da fumaça guarda isso. */
  /* ---- orçamento: formulário ---- */
  .oitemcard{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px}
  .ototal{font-size:14px;color:var(--mut)}
  .ototal b{color:var(--acc);font-size:18px;margin-left:8px}
  .cfgta{width:100%;min-height:64px;resize:vertical;background:var(--card2);border:1px solid var(--line);
    border-radius:7px;color:var(--tx);padding:8px 10px;font:inherit;font-size:13px;color-scheme:dark}
  .cfgta:focus{outline:none;border-color:var(--acc)}

  /* ---- orçamento: documento impresso ---- */
  .opage{font-family:"Bahnschrift","Arial Narrow",Arial,Helvetica,sans-serif;color:#111;font-size:10.5px;
    line-height:1.45;display:flex;flex-direction:column}
  .ohead{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
  .ologo{width:100px;height:100px;flex:none;display:flex;
    align-items:center;justify-content:center;overflow:hidden;background:#fff}
  .ologo img{max-width:84%;max-height:84%}
  .otb{flex:1;padding-top:8px}
  .orule{border-top:3px solid #222}
  .otitle{text-align:center;font-weight:bold;font-size:16.5px;letter-spacing:.04em;padding:4px 0}
  .osub{text-align:center;font-size:13px;margin-top:6px}
  .obar{background:#e6e6e6;font-weight:bold;font-size:12.5px;padding:3px 8px;margin:6px 0 8px}
  .osec{display:flex;align-items:center;gap:10px;font-weight:bold;font-size:11.5px;margin:9px 0 3px}
  .osec::after{content:'';flex:1;border-top:1px solid #aaa}
  .ocl{margin:4px 0}
  .obuls{margin:2px 0 6px 26px}
  .obul{margin:1px 0}
  .octr{border-top:2.5px solid #222;border-bottom:2.5px solid #222;text-align:center;font-weight:bold;
    font-size:13.5px;letter-spacing:.05em;padding:3px 0;margin:12px 0 10px}
  .oitem{margin:0 0 12px}
  .oitrow{display:flex;gap:14px;align-items:flex-start}
  .oittxt{flex:1;min-width:0}
  .oitimgwrap{flex:0 0 130px;width:130px}
  .oitimgwrap img{max-width:100%;height:auto;border-radius:3px;display:block}
  .oit{font-weight:bold;font-size:12.5px;border-bottom:1px solid #333;padding-bottom:2px;margin-bottom:4px}
  .ospec{font-size:10px;margin:1px 0}
  .oval{display:inline-block;background:#ececec;padding:3px 12px;margin-top:5px;font-size:11px}
  .oval b{font-size:13px}
  .ospacer{flex:1}
  .ogar{background:#ececec;text-align:center;font-size:9px;padding:8px 14px;margin-top:12px}
  .ofoot{border-top:2.5px solid #222;border-bottom:2.5px solid #222;text-align:center;font-weight:bold;
    font-size:12px;padding:3px 0;margin-top:10px}
  .opay{display:flex;align-items:flex-end;gap:24px;margin:4px 0 10px}
  .osig{width:45%;text-align:center;font-size:10.5px}
  .osigline{border-bottom:1px solid #333;height:34px;margin-bottom:3px;position:relative}
  .osigimg{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);max-height:52px;max-width:88%;pointer-events:none}
  .oinv{flex:1;text-align:right;font-size:12px}
  .oinv b{background:#ececec;padding:4px 10px;font-size:15px;margin-left:6px}
  .obank{display:flex;border-top:2px solid #222;border-bottom:2px solid #222;padding:6px 0;margin-bottom:6px;gap:14px;align-items:center}
  .obk{flex:1;font-size:10px;line-height:1.5}
  .obk1{color:#a33327;font-weight:bold;font-size:11px}
  .opix{border-left:1px solid #999;padding:2px 16px;text-align:center;flex:none}
  .opx0{font-size:9px}
  .opx1{font-weight:bold;font-size:11px}
  .opx2{color:#c62828;font-weight:bold;font-size:11.5px}
  .ocli{text-align:center;font-size:10.5px;margin:2px 0 4px}
  .oflds{display:flex;gap:30px;margin-top:8px}
  .ofcol{flex:1}
  .ofcol.right{display:flex;flex-direction:column;justify-content:flex-end}
  .ofrow{display:flex;gap:18px}
  .ofrow .ofld{flex:1}
  .ofld{border-bottom:1px solid #777;font-size:8.5px;color:#333;padding:16px 2px 1px;margin-bottom:4px}
  .ofsig{border-bottom:1px solid #333;height:40px;margin-bottom:4px}
  .ofdate{text-align:center;font-weight:bold;font-size:11px}
  .ohl{background:#ffe95c;padding:0 2px}

  /* ---- janela "Adicionar tipologia" (js/orcamento-tipologias.js) ----
     Em cima da casca .cem-dlg (véu, Escape, foco), mas no TEMA DO APP: fonte
     de 14px e alvos de 44px, não os 12,5px do diálogo do CEM. cem-dialogo.css
     é carregado DEPOIS deste arquivo, então as regras que disputam com as de
     lá (.cem-dlg .btn, .cem-dlg input) têm um seletor a mais para ganhar. */
  .cem-dlg.octip{width:min(1280px,96vw);max-height:88vh;font-size:14px}
  .cem-dlg.octip .dh button{min-height:44px;min-width:44px}
  .cem-dlg.octip button.btn{min-height:44px;font-size:14px;padding:8px 14px;border-radius:var(--radius-sm)}
  .cem-dlg.octip input.in,.cem-dlg.octip select.in{min-height:44px;font-size:14px;padding:8px 10px;width:100%}
  .cem-dlg.octip :is(button,input,select):focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .cem-dlg.octip .df{gap:10px;flex-wrap:wrap}
  .octip-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--line)}
  .octip-filtros [data-octip-busca]{flex:1 1 240px}
  .octip-filtros label{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;font-size:12.5px;color:var(--mut)}
  .octip-filtros [data-octip-total]{flex-basis:100%;margin:0}
  .octip-corpo{flex:1;min-height:0;overflow:auto;padding:14px}
  .octip-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  .octip-card{display:flex;flex-direction:column;gap:6px;min-height:44px;text-align:left;font:inherit;color:var(--tx);cursor:pointer;
    background:var(--card);border:2px solid var(--line);border-radius:var(--radius-md);padding:10px}
  @media (hover:hover){.octip-card:hover{border-color:var(--acc)}}
  .octip-card[aria-pressed="true"]{border-color:var(--acc)}
  .octip-mini{display:block;aspect-ratio:1/1;background:#fff;border-radius:var(--radius-sm);overflow:hidden;padding:8px}
  .octip-mini img{display:block;width:100%;height:100%;object-fit:contain}
  .octip-semcroqui{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;
    color:#6b7280;background:transparent;border-radius:var(--radius-sm);font-size:12px}
  .octip-semcroqui svg{width:40%;height:auto}
  .octip-desc{font-size:13px;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .octip-cod{font-weight:600}
  .octip-meta{font-size:12px;color:var(--mut)}
  .octip-sel{display:none;margin-top:auto;padding:4px;text-align:center;font-size:12px;font-weight:600;color:#fff;background:var(--acc);border-radius:var(--radius-sm)}
  .octip-card[aria-pressed="true"] .octip-sel{display:block}
  @media (max-width:480px){.octip-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.cem-dlg.octip{max-height:94vh}.cem-dlg.octip [data-octip-status]{flex-basis:100%}}

  /* ---- passos 2 e 3: a mesma janela, mais estreita; título + "Passo N de 3" ----
     O indicador de passo saiu do cabeçalho (Ruling T3-R2, rodada de correção 1):
     nenhum token do app chega a 4,5:1 sobre --acc, nem o branco do título (4,47:1).
     Aqui, no corpo, --mut mede 6,16:1 — mesma cor do aviso do rodapé. Some quando
     vazio (hidden do passo 1) e não ocupa espaço. */
  .cem-dlg.octip.octip-estreita{width:min(760px,96vw)}
  .cem-dlg.octip .octip-etapa{margin:8px 14px 0}
  .octip-p1{display:flex;flex-direction:column;flex:1;min-height:0}
  .octip-p1[hidden],.octip-passo[hidden]{display:none}
  .octip-escolhida{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
  .octip-escolhida [data-octip-trocar]{margin-left:auto}
  /* Altura fixa desde o início do passo 2, com ou sem imagem (spec §8): sem isso
     o passo cresce quando a redução termina depois do usuário já ter seguido
     em frente (achado 8 da rodada de correção 1). */
  .octip-previa{margin-top:8px;height:150px}
  .octip-previa img{display:block;width:100%;height:100%;object-fit:contain;border-radius:var(--radius-sm);background:#fff}
  .cem-dlg.octip .df [data-octip-aviso]{flex:1 1 200px}
  /* Achado I1 (rodada de correção 2): .g3 nunca existiu fora do bloco de
     480px, então o passo 3 saía numa coluna só acima disso (spec §1.3 pede
     três). A regra abaixo é a coluna default; o bloco de 480px continua
     reduzindo para duas — MESMA especificidade da regra de lá (3 classes,
     sem prefixo .cem-dlg.octip), senão a mais específica ganharia mesmo
     dentro do media query e a tela pequena nunca veria as duas colunas. */
  .octip-vars.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:480px){.cem-dlg.octip .df [data-octip-aviso]{flex-basis:100%}.octip-vars.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}

  /* ---- cartão de resumo do item calculado: o op2Item da folha, no tema ----
     Os três tokens de impressão viram os do tema; o papel do croqui (.op2-des,
     #fff) continua branco — a mesma exceção do .octip-mini (DESIGN.md).

     Rodada de correção 1 (achados Important 1 e 3 do revisor, Rulings T4-R2 e
     T4-R4): a caixa do desenho ganhou altura FIXA (era só min-height, e a
     moldura "sem croqui" e o croqui real tinham alturas diferentes — o cartão
     pulava de tamanho ao hidratar). A tabela trocou table-layout:fixed (que
     vaza em qualquer largura, bastando um valor comprido demais para a coluna)
     por auto, sem quebra de linha — só a coluna Linha pode —, dentro de uma
     caixa que rola de lado sozinha; a página nunca rola.

     table-layout:auto pode crescer além do width:100% da tabela para caber o
     conteúdo (ao contrário do fixed, que sempre respeita o width e deixa o
     conteúdo vazar dentro da célula) — é o que o .op2-tbwrap existe para
     conter. Mas isso só funciona se .op2-tbwrap tiver largura DEFINIDA: em
     flex-direction:row (padrão), .op2-dad{flex:1;min-width:0} já garante isso
     no eixo principal. Em flex-direction:column (≤600px), width vira eixo
     cruzado — min-width:0 não limita crescimento ali —, por isso .op2-dad
     também ganha width:100% explícito no media query abaixo, do mesmo jeito
     que .op2-des já tinha. Sem isso, .op2-dad (e tudo dentro, tabela
     incluída) cresce para caber o conteúdo e estoura a página inteira. */
  .oitem-resumo .op2-item{--op2-val:var(--tx);--op2-linha:var(--line);--op2-linha2:var(--line);border-bottom:0;padding:0;font-size:13px}
  .oitem-resumo .op2-tb{font-size:13px;table-layout:auto}
  .oitem-resumo .op2-tb th,.oitem-resumo .op2-tb td{white-space:nowrap}
  .oitem-resumo .op2-tb .c5{white-space:normal}
  .oitem-resumo .op2-tb td.c7{color:var(--tx)}
  .oitem-resumo .op2-tbwrap{overflow-x:auto}
  .oitem-resumo .op2-des{border-radius:var(--radius-sm);padding:6px;height:150px}
  .oitem-resumo .op2-des img{max-height:100%;object-fit:contain}
  .oitem-resumo [data-ocres]:not(:empty){margin-top:8px}
  /* .btnrow (base.css) traz margin-top:14px para todo mundo; aqui os botões
     já nascem alinhados ao rótulo "Item N" pelo flex do cabeçalho — a margem
     herdada só descia os dois uns 7px sem propósito. */
  .oitem-resumo .btnrow{margin-top:0}
  @media (max-width:600px){.oitem-resumo .op2-item{flex-direction:column}.oitem-resumo .op2-des{width:100%;flex-basis:auto;height:120px}.oitem-resumo .op2-dad{width:100%}}