/* Lo propio del panel de ejemplo (/demo/panel/). El panel en sí es el de verdad (panel.css y panel-boda.css). */
.ej-franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: .2rem 1rem;
  background: var(--color-primary); color: var(--color-neutral-bg); font: 500 .9rem/1.3 var(--font-text); }
.ej-franja p { margin: 0; padding: .4rem 0; }
.ej-franja a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ej-franja a:focus-visible { outline: 3px solid var(--color-neutral-bg); outline-offset: 2px; }
/* El aviso de «no se guarda nada» sale por encima de la barra fija de abajo, no escondido detrás */
body.con-barra-crear .pb-aviso { bottom: 6.4rem; }
@media (max-width: 30rem) { body.con-barra-crear .pb-aviso { bottom: 8.4rem; } }
/* La nota dentro de un diálogo (la capa del diálogo tapa el aviso de abajo) */
.ej-nota { margin-top: .75rem; }

/* Dentro del móvil de la portada (?movil=1): solo el panel, como en un móvil de verdad. Arriba, el hueco de la muesca del móvil dibujado. */
.ej-movil .ej-franja, .ej-movil .barra-crear, .ej-movil .pie-legal, .ej-movil .pb-saltar { display: none !important; }
.ej-movil .marca-agua::after { display: none !important; }
.ej-movil body.con-barra-crear { padding-bottom: 0 !important; }
.ej-movil body::before { content: ""; display: block; height: 36px; background: var(--color-neutral-surface); }
.ej-movil body.con-barra-crear .pb-aviso { bottom: 1rem; }