/* 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;
}

/* Feedback visual al reordenar (secciones y elementos de una sección de
   "Patrón"), aplicado dinámicamente desde js/dnd.js. */
.dragging {
  opacity: 0.6;
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.3);
  transform: scale(1.03) rotate(-1deg);
  cursor: grabbing;
}

/* Contenedor donde se está reordenando algo: lo marca como zona activa
   mientras dura el arrastre. */
.drop-target-active {
  outline: 2px dashed #64908A;
  outline-offset: 4px;
  background-color: rgb(100 144 138 / 0.08);
}

/* 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;
  }

  @page { margin: 0; }

  #panel-output,
  #panel-output * {
    visibility: visible;
    /* Los navegadores no imprimen colores de fondo por defecto (dependen de
       la opción "Gráficos de fondo" del diálogo de impresión, que el
       usuario puede tener desmarcada); esto fuerza a respetar los colores
       elegidos en una sección de "Nota" aunque esa opción esté desactivada. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

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

  #panel-output {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    /* @page tiene margin: 0 (ver más abajo), así que sin esto el contenido
       llegaría hasta el borde físico de la hoja. Se pone aquí (como
       padding del propio contenido) en vez de en @page porque el soporte
       de "margin" en @page es más inconsistente entre navegadores. */
    padding: 2cm;
    box-sizing: border-box;
  }

  #preview-title {
    display: none;
  }
}