/* Pontos de material (site/materiais.js, site/painel-materiais.js). Cores do resto do site em estilo.css. */
.marca-tipo.material { background: #D9A066; border-radius: 2px; box-shadow: 0 0 0 2px var(--vinho); }
.pilula.material { background: #D9A066; color: var(--vinho); }
.materiais { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.material { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linha); border-radius: 10px; padding: 8px; }
.material-foto { flex: 0 0 72px; }
.material-foto img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.material-texto p { margin: 0.15em 0; }
.disponivel { font-weight: 650; }
.disponivel.acabou { color: var(--apagado); }
.pedido-itens, .estoque { list-style: none; padding: 0; }
.pedido-itens li, .estoque li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.pedido-itens input, .estoque input { width: 7rem; }
.lista-pontos { list-style: none; margin: 0; padding: 0; }
.lista-pontos li { padding: 6px 0; border-top: 1px solid var(--linha); }
.resumo-materiais { margin: 0.1em 0 0; font-size: 0.9rem; }
.linha-material { border: 1px solid var(--linha); border-radius: 10px; padding: 8px; margin: 8px 0; display: grid; gap: 6px; }
.previa-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; display: block; }
.quadro-materiais > summary { cursor: pointer; padding: 10px 0; list-style-position: inside; }
.quadro-materiais > summary .dica { font-weight: 400; }