/* ---------- Columna de paneles: plegado y grupo de pestañas (#111) ---------- */
/* paneles-plegables.js y pestanas-organizar.js. Usa los tokens de /comun/taller.css, que ya
   cambian en modo oscuro. Orden de la columna (index.html): Capas, grupo Transformar · Alinear ·
   Buscatrazos · Transparencia, Carácter y párrafo, Relleno, Trazo, Muestras y Fornituras. */

.estudio-paneles { overflow-x: hidden; }

/* Título que pliega: la flecha delante del nombre, como en Illustrator. Todo el título es la
   zona de clic. */
.panel-titulo { margin: 0; min-width: 0; }
.panel-plegar {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.panel-plegar:hover { color: var(--tinta); }
.panel-flecha {
  flex: none;
  margin-left: -1px;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.panel-plegar[aria-expanded="false"] .panel-flecha { transform: rotate(-90deg); }
.panel-plegar-nombre {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Plegado: solo queda el título, en una línea más baja. */
.panel[data-plegable][data-plegado] > :not(.panel-titulo) { display: none; }
.panel[data-plegado] { padding-block: 9px; }

/* ---------- Grupo de pestañas (pestanas-organizar.js) ---------- */
/* Una sola fila: el título (el panel que se ve) y, a la derecha, cuatro pestañas de icono. */
.panel-pestanas { gap: 8px; }
.pestanas-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pestanas-cabecera .panel-titulo { flex: 1; }
.pestanas { display: flex; flex: none; gap: 2px; }
.pestana {
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--secundario);
  cursor: pointer;
}
.pestana:hover { background: var(--superficie); color: var(--tinta); }
.pestana svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pestana svg .lleno { fill: currentColor; stroke: none; }
/* La pestaña del panel que se ve: en tinta y, abierta, con la nota verde debajo. */
.pestana[aria-selected="true"] { color: var(--tinta); border-radius: var(--radio) var(--radio) 0 0; box-shadow: inset 0 -2px 0 var(--acento); }
.panel-pestanas[data-plegado] .pestana[aria-selected="true"] { box-shadow: none; border-radius: var(--radio); }
.pestanas-cuerpo[hidden],
.pestanas-cuerpo [role="tabpanel"][hidden] { display: none; }