/* Selector de materiales · paleta de archiblocks.cl (grafito, crema, marfil, rojo),
   la misma que usa Archibloques, para que se vea igual dentro de un mockup3d. */
.selector-materiales {
  --sm-grafito: #3d3832; --sm-crema: #f4eedd; --sm-marfil: #fffcf3; --sm-rojo: #dc3839;
  --sm-borde: #e2d9c4; --sm-suave: #7a7166;
  color: var(--sm-grafito); font: 14px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; gap: 10px; max-width: 480px;
}
.selector-materiales * { box-sizing: border-box; }
.selector-materiales [hidden] { display: none !important; }

.sm-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sm-buscar {
  flex: 1 1 200px; border: 1px solid var(--sm-borde); background: #fff; border-radius: 6px;
  padding: 7px 10px; font: inherit; color: inherit;
}
.sm-ver-todos, .sm-propio {
  border: 1px solid var(--sm-borde); background: var(--sm-marfil); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-weight: 600; color: inherit; cursor: pointer;
}
.sm-ver-todos:hover, .sm-propio:hover { border-color: var(--sm-grafito); }
.sm-ver-todos[aria-pressed=true] { background: var(--sm-grafito); color: var(--sm-marfil); border-color: var(--sm-grafito); }

.sm-vacio { color: var(--sm-suave); font-style: italic; margin: 4px 0; }

.sm-lista { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; border: 1px solid var(--sm-borde); border-radius: 8px; background: #fff; }
.sm-lista > li { border-bottom: 1px solid var(--sm-borde); }
.sm-lista > li:last-child { border-bottom: none; }
.sm-lista details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; cursor: pointer; list-style: none; font-weight: 600;
}
.sm-lista details > summary::-webkit-details-marker { display: none; }
.sm-lista details > summary::before { content: '▸'; margin-right: 6px; color: var(--sm-suave); }
.sm-lista details[open] > summary::before { content: '▾'; }
.sm-lista details > summary .sm-nombre { flex: 1; }
.sm-lista details > summary .sm-conteo { color: var(--sm-suave); font-weight: 400; }
.sm-lista details > summary .sm-conteo::before { content: '('; }
.sm-lista details > summary .sm-conteo::after { content: ')'; }
.sm-lista details > ul { list-style: none; margin: 0; padding: 0; background: var(--sm-crema); }

.sm-lista button[data-id] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  border: none; background: none; text-align: left; padding: 7px 12px 7px 26px; font: inherit; color: inherit; cursor: pointer;
}
.sm-lista button[data-id]:hover, .sm-lista button[data-id]:focus-visible { background: rgba(220, 56, 57, .1); }
.sm-lista button[data-id] .sm-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-lista button[data-id] .sm-termico { color: var(--sm-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-lista button[data-id] .sm-sin-dato { font-style: italic; }
:focus-visible { outline: 2px solid var(--sm-rojo); outline-offset: -2px; }

.sm-form-propio {
  border: 1px solid var(--sm-borde); border-radius: 8px; padding: 12px; background: var(--sm-marfil);
  display: flex; flex-direction: column; gap: 8px;
}
.sm-form-titulo { margin: 0; font-weight: 600; }
.sm-form-propio label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sm-form-propio input {
  border: 1px solid var(--sm-borde); background: #fff; border-radius: 6px; padding: 6px 8px; font: inherit; color: inherit;
}
.sm-errores { color: #b92c2d; margin: 0; padding-left: 18px; font-size: 13px; }
.sm-form-botones { display: flex; gap: 8px; margin-top: 4px; }
.sm-form-botones button {
  border: 1px solid var(--sm-borde); background: var(--sm-marfil); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-weight: 600; color: inherit; cursor: pointer;
}
.sm-form-botones button.primario { background: var(--sm-rojo); border-color: var(--sm-rojo); color: #fff; }