/* Átrio · cartão SubstraIA — ATIV#7362. Mesma linguagem do Átrio (vidro, med, btn, variáveis do :root do index.html).
   Tudo com prefixo .sb- para não tocar no que já existe (.sub é o parágrafo de subtítulo do Átrio). Dados de /api/substraia (js/substraia.js).
   Diferença inserido/removido NUNCA só por cor: inserido = sublinhado, removido = riscado (acessível a quem não distingue cores). */
.sb-folha{padding-bottom:40px}
.sb-folha *{min-width:0}
.sb-sec{padding:16px 18px;margin-top:14px}
.sb-folha .sb-h{font:500 12px var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--am-texto-fraco);margin:0 0 12px}
.sb-mono{font:11.5px var(--mono);color:var(--am-texto-fraco)}
.sb-fraco{color:var(--am-texto-fraco);font-size:12.5px}
.sb-vazio{color:var(--am-texto-fraco);font-size:13.5px;margin:6px 0}

/* escolha de marca e item */
.sb-escolha{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:6px 18px}
.sb-itemsel{display:flex;flex-direction:column;gap:6px}
.sb-campo{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.sb-rotulo{font:500 12px var(--corpo);color:var(--am-texto-fraco)}
.sb-ajuda{font-size:12px;line-height:1.45;color:var(--am-texto-fraco)}
.sb-in{width:100%;font:13px var(--corpo);color:var(--am-texto);background:rgba(0,0,0,.28);border:1px solid var(--vidro-borda);border-radius:12px;padding:10px 12px;outline:none}
.sb-in:focus{border-color:var(--am-accent)}
textarea.sb-in{resize:vertical;line-height:1.45}

/* grade principal: o texto agora (esquerda) | pedir e resultado (direita) */
.sb-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.sb-lateral{display:flex;flex-direction:column}
.sb-itemcab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:10px}
.sb-itemnome{font-family:var(--display);font-size:19px;font-weight:500;line-height:1.2;overflow-wrap:anywhere}

/* campos do item */
.sb-campo-bloco{border:1px solid var(--vidro-borda);border-radius:14px;padding:11px 13px;background:rgba(255,255,255,.025);margin-top:10px}
.sb-campo-bloco.sb-sem{border-style:dashed;opacity:.8}
.sb-campo-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:6px}
.sb-campo-t{font:500 13px var(--corpo);color:var(--am-texto);margin-right:auto;overflow-wrap:anywhere}
.sb-texto{white-space:pre-wrap;overflow-wrap:anywhere;font:13.5px/1.55 var(--corpo);background:rgba(0,0,0,.22);border:1px solid var(--vidro-borda);border-radius:12px;padding:10px 12px;max-height:34vh;overflow:auto;scrollbar-width:thin}
.sb-chip{font:500 11px var(--mono);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--am-texto-fraco);border:1px solid rgba(255,255,255,.06);overflow-wrap:anywhere}
.sb-chip.sb-quente{color:#FFD9A3;background:rgba(240,178,76,.12);border-color:rgba(240,178,76,.28)}
.sb-chip.sb-vivo{color:#B9F1D6;background:rgba(91,214,160,.12);border-color:rgba(91,214,160,.28)}
.sb-chip.sb-ia{color:#CFE0FF;background:rgba(108,140,255,.14);border-color:rgba(108,140,255,.3)}
.sb-chip.sb-fraco{color:var(--am-texto-fraco)}

/* histórico e material (recolhíveis) */
.sb-hist{margin-top:8px}
.sb-hist>summary{cursor:pointer;font:500 11.5px var(--corpo);letter-spacing:.1em;text-transform:uppercase;color:var(--am-texto-fraco)}
.sb-versao{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);font-size:12.5px;line-height:1.45}
.sb-versao-t{color:var(--am-texto)}
.sb-versao-x{color:var(--am-texto-fraco);overflow-wrap:anywhere;margin-top:2px}
.sb-mat{font-size:12.5px;line-height:1.45;margin-top:6px;overflow-wrap:anywhere;color:var(--am-texto-fraco)}
.sb-mat b{color:var(--am-texto);font-weight:500}

/* pedido (formulário) e botões */
.sb-acoes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:10px}
.sb-acoes .sb-msg{flex:1 1 240px}
.sb-pedir{padding:11px 26px}
.sb-caixa{margin-top:8px}
.sb-botoes{margin-top:14px}

/* mensagens: falha ruidosa com o motivo, nunca só cor (o texto diz) */
.sb-msg:empty{display:none}
.sb-msg{font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:10px;overflow-wrap:anywhere;margin-top:8px}
.sb-msg.sb-erro{background:rgba(255,107,122,.12);border:1px solid rgba(255,107,122,.4);color:#FFC9CF}
.sb-msg.sb-ok{background:rgba(91,214,160,.12);border:1px solid rgba(91,214,160,.3);color:#C9F4DF}
.sb-msg.sb-espera{background:rgba(255,255,255,.05);border:1px solid var(--vidro-borda);color:var(--am-texto-fraco)}
.sb-msg.sb-quente{background:rgba(240,178,76,.12);border:1px solid rgba(240,178,76,.3);color:#FFE3B8}

/* resultado: cabeçalho, ANTES/DEPOIS com diff, avisos */
.sb-res-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.sb-num{font:600 13px var(--mono);color:var(--am-ciano)}
.sb-pedidotxt{font-size:13px;line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
.sb-comparar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.sb-lado-t{font:600 11px var(--mono);letter-spacing:.12em;color:var(--am-texto-fraco);margin-bottom:5px}
.sb-comparar .sb-texto{max-height:44vh}
.sb-del{text-decoration:line-through;text-decoration-thickness:2px;background:rgba(255,107,122,.18);color:#FFD0D5;border-radius:3px}
.sb-ins{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;background:rgba(91,214,160,.18);color:#C9F4DF;border-radius:3px}
.sb-legenda{font-size:11.5px;color:var(--am-texto-fraco);margin-top:6px}
.sb-oquemudou{font-size:13px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
.sb-avisos{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.sb-aviso{font-size:12.5px;line-height:1.45;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--vidro-borda);overflow-wrap:anywhere}
.sb-aviso .sb-sinal{display:inline-block;width:1.2em;font-weight:700}
.sb-aviso .sb-rot{font-weight:600}
.sb-av-ok{border-color:rgba(91,214,160,.3)}
.sb-av-barrou{border-color:rgba(255,107,122,.45)}
.sb-licao{font-size:12.5px;line-height:1.45;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(108,140,255,.1);border:1px solid rgba(108,140,255,.3);overflow-wrap:anywhere}

/* pedidos recentes */
.sb-lista{display:flex;flex-direction:column;gap:8px}
.sb-linha{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;width:100%;text-align:left;color:inherit;font:inherit;padding:10px 14px;cursor:pointer;background:var(--vidro);border:1px solid var(--vidro-borda);border-radius:14px;transition:.2s}
.sb-linha:hover{border-color:var(--vidro-luz);transform:translateY(-1px)}
.sb-linha.sb-sel{border-color:var(--am-accent-forte);box-shadow:0 0 0 1px rgba(108,140,255,.35)}
.sb-l-t{flex:1 1 260px;font-size:13.5px;overflow-wrap:anywhere}

@media (max-width:860px){
  .sb-grade{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sb-escolha{grid-template-columns:1fr}
  .sb-comparar{grid-template-columns:1fr}
  .sb-sec{padding:14px}
  .sb-l-t{flex-basis:100%}
  .sb-pedir{width:100%}
  .sb-membro{padding:10px}
  .sb-acoes .btn{flex:1 1 100%}
}

/* cartilha viva (O que a Ária aprendeu) */
.sb-licao-grupo{margin-top:12px}
.sb-licao-regra{font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;margin:2px 0 6px}

/* v1.1 - varredura da peça inteira: um GRUPO de pedidos irmãos é UM bloco, um campo por caixa (ATIV#7362) */
.sb-resumo-grupo{margin:-2px 0 4px}
.sb-todos{margin-top:8px}
.sb-aplicar-todos{padding:11px 26px}
.sb-res-grupo{margin-top:10px;padding:9px 11px;border:1px solid var(--vidro-borda);border-radius:12px;background:rgba(255,255,255,.035);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.sb-membro{border:1px solid var(--vidro-borda);border-radius:14px;padding:11px 13px;margin-top:12px;background:rgba(255,255,255,.025)}
.sb-membro.sb-m-aplicado{border-color:rgba(91,214,160,.3)}
.sb-membro.sb-m-subiu{border-color:rgba(108,140,255,.3)}
.sb-membro.sb-m-proposto,.sb-membro.sb-m-claude-propos{border-color:rgba(240,178,76,.3)}
.sb-membro-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px}
.sb-av-info{border-color:var(--vidro-borda)}
@media (max-width:640px){
  .sb-aplicar-todos{width:100%}
}