.pestanas__item {
  display: contents;
}

.pestanas__boton {
  padding: 10px var(--spacing-md);
  border: 1px solid var(--mp-neutral-400);
  background-color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--mp-neutral-800);
  cursor: pointer;
}

.pestanas__boton:hover {
  filter: brightness(0.97);
}

.pestanas__boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.pestanas__boton--activo {
  border-color: var(--mp-navy-800);
  background-color: var(--mp-navy-800);
  color: var(--text-on-inverse);
}

.pestanas__panel {
  display: none;
}

.pestanas__panel--activo {
  display: block;
}

@media (max-width: 768px) {
  .pestanas__boton {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 14px;
  }
}

/*
 * Modo edición de Canvas: cada pestaña se dibuja como una tarjeta con su
 * título de encabezado. El encuadre, el radio y los espaciados los pone
 * Bootstrap desde pestana.twig; acá solo van los colores del sistema de
 * diseño, que Bootstrap no conoce.
 *
 * @see pestana.twig
 * @see ../../organisms/pestanas/pestanas.js
 */
/*
 * Los tokens viven en `.canvas-page` (ver css/tokens.css), no en `:root`. Un
 * token que no resuelva dejaría inválido el atajo `border` de Bootstrap y el
 * recuadro desaparecería por completo, así que acá van con respaldo literal.
 */
.pestanas__item--editor {
  --bs-border-color: var(--mp-neutral-300, #d9dfe5);
}

.pestanas__boton--editor {
  border: 0;
  border-bottom: 1px solid var(--mp-neutral-300, #d9dfe5);
  border-radius: 0;
  background-color: var(--mp-neutral-25, #f8fafd);
  color: var(--mp-neutral-900, #1e252e);
  /* No hace nada al pulsarlo: el JS de pestañas no corre en el lienzo. */
  cursor: default;
}

.pestanas__boton--editor:hover {
  filter: none;
}