/* ---------- Caras del Diseño: Delantero y Espalda (caras.js, modelo/caras.js) ---------- */
/* Pestañas arriba, en el centro de la Mesa de trabajo; con las reglas visibles, debajo de ellas. */
.caras {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
}
.estudio-escenario[data-reglas] .caras { top: calc(var(--regla) + 8px); }

.caras-pestanas {
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.caras-pestana {
  padding: 4px 14px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--secundario);
  font: 500 13px/1.3 var(--letra);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.caras-pestana:hover { color: var(--tinta); background: var(--superficie); }
/* La cara activa se ve clara: en tinta, como la hoja que se tiene delante. */
.caras-pestana[aria-selected="true"] { color: var(--fondo); background: var(--tinta); }

.caras-copiar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  font: 12px/1.3 var(--letra);
  white-space: nowrap;
  cursor: pointer;
}
.caras-copiar:hover { background: var(--superficie); }
.caras-copiar svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* En pantallas estrechas el botón se queda en el icono (el nombre sigue en el title). */
@media (max-width: 900px) {
  .caras-copiar { font-size: 0; gap: 0; }
}

/* ---------- Exportar: elegir Delantero, Espalda o ambas ---------- */
.exportar-caras {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px 12px;
  margin: 0 0 4px;
  padding: 6px 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  font: 13px/1.2 var(--letra);
  color: var(--tinta);
}
.exportar-caras legend {
  float: left;
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 4px;
  font: 500 11px/1.2 var(--letra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secundario);
}
.exportar-caras label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.exportar-caras input { margin: 0; accent-color: var(--acento); }
.exportar-caras small { grid-column: 1 / -1; font: 11px/1.3 var(--letra); color: var(--secundario); max-width: 24em; }