/* ======================================================
   BARRA PÚBLICA (components/barra_publica.html)
   ------------------------------------------------------
   Logo a la izquierda, «volver» a la derecha. La usan la
   portada del evento, el formulario de inscripción y el
   de compra; es la misma barra que la portada de eventos
   (.mp-barra en main_page.css).
   ====================================================== */

.barra-pub { background: #fff; border-bottom: 1px solid #e5e7eb; width: 100%; box-sizing: border-box; }
.barra-pub__dentro {
  width: 100%; margin: 0 auto; padding: 12px 20px; box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* content-box: el max-width es el del contenido de debajo y el relleno va fuera,
   así el logo queda alineado con el borde de la tarjeta. */
.barra-pub__logo img { height: 26px; display: block; }
.barra-pub__volver {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 13px; border-radius: 8px;
  font: 600 13px "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb; text-decoration: none;
  transition: background .15s, color .15s;
}
.barra-pub__volver:hover { background: #e5e7eb; color: #111827; }
.barra-pub__volver svg { transition: transform .15s; }
.barra-pub__volver:hover svg { transform: translateX(-2px); }
.barra-pub__volver:focus-visible, .barra-pub__logo:focus-visible { outline: 3px solid rgba(17,24,39,.35); outline-offset: 2px; }

@media (max-width: 640px) {
  .barra-pub__dentro { padding: 10px 16px; max-width: none !important; box-sizing: border-box; }
  .barra-pub__logo img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .barra-pub__volver svg { transition: none; } }