/* HTML: <div class="breadcrumb"></div> */
.breadcrumb {
  --s: 20px; /* control the shape */
  
  line-height: 1.8; /* control the height */
  padding-inline: calc(var(--s) + .3em);
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
  background: #EAEAEA;
  width: fit-content;
}

/* En pantallas pequeñas, "Secciones" y "Vista previa" se comportan como
   pestañas: solo se muestra una a la vez (ver .tabs en index.html). A
   partir del breakpoint md ambos paneles se muestran siempre, lado a lado.
   Se restringe a "screen" para que nunca afecte a la exportación a PDF
   (@media print más abajo), sea cual sea el ancho de pantalla del usuario. */
@media screen and (max-width: 767px) {
  .panel-hidden-mobile {
    display: none;
  }
}

/* Al exportar/imprimir, solo se muestra #panel-output (y no sus propios
   controles, marcados con .no-print), ocultando el resto de la página. */
@media print {
  body * {
    visibility: hidden;
  }

  #panel-output,
  #panel-output * {
    visibility: visible;
  }

  #panel-output .no-print {
    display: none;
  }

  #panel-output {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
  }
}