/* MDPD Boletería (página 2534, 2026-09-29): el complemento de Taquilla para vender en otros sitios.
   Carga también escenas/taquilla.css: comparte el hero (la noche de parque), el celular con la
   entrada, el papel y el sello. Acá van solo las piezas propias (prefijo bo-). */

/* Vende uno, emite el otro: los dos sitios y la conexión firmada entre ellos */
.bo-sitio { top: 40px; width: 118px; padding-bottom: 7px; display: grid; gap: 4px; overflow: hidden; }
.bo-sitio.es-tienda { left: 12px; }
.bo-sitio.es-emisor { right: 12px; top: 56px; }
.bo-sitio .tq-rot { padding: 0 7px; }
.bo-sitio-cab { display: flex; align-items: center; gap: 2.5px; padding: 4px 6px; border-bottom: 1px solid #EEF2F6; background: #F8FAFC; }
.bo-sitio-cab i { width: 4px; height: 4px; border-radius: 50%; background: #CBD5E1; }
.bo-sitio-cab b { margin-left: 3px; font-size: 6px; font-weight: 700; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-prod { display: grid; grid-template-columns: 22px 1fr; gap: 1px 5px; align-items: center; padding: 0 7px; }
.bo-foto { grid-row: span 2; width: 22px; height: 22px; border-radius: 4px; overflow: hidden; }
.bo-foto svg { display: block; width: 100%; height: 100%; }
.bo-prod b { display: block; font-size: 7px; font-weight: 800; white-space: nowrap; }
.bo-prod small { display: block; font-size: 5.5px; font-weight: 600; color: #64748B; white-space: nowrap; }
.bo-prod em { grid-column: 2; font-style: normal; font-size: 7.5px; font-weight: 800; color: #1E293B; }
.bo-pagado { display: flex; align-items: center; gap: 4px; margin: 1px 7px 0; padding: 3px 5px; border-radius: 4px; background: #E7F6EF; color: #0B8A63; font-size: 6.5px; font-weight: 800; }
.bo-enlace { position: absolute; left: 128px; top: 80px; width: 52px; height: 26px; overflow: visible; }
.bo-linea { animation: bo-corre 1.2s linear infinite; }
@keyframes bo-corre { to { stroke-dashoffset: -18; } }
.bo-viaja { animation: bo-viaja 2.4s ease-in-out infinite; }
@keyframes bo-viaja { 0% { transform: translateX(2px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(78px); opacity: 0; } }
.bo-emitidas { display: grid; gap: 3px; padding: 0 7px; }
.bo-emitidas span { display: grid; grid-template-columns: 18px 1fr auto; gap: 4px; align-items: center; padding: 3px; border-radius: 4px; background: #F2F5F7; }
.bo-emitidas svg { width: 18px; height: 18px; }
.bo-emitidas b { font-size: 6.5px; font-weight: 800; }
.bo-emitidas em { padding: 2px 4px; border-radius: 99px; background: #0B8A63; color: #fff; font-style: normal; font-size: 5.3px; font-weight: 800; animation: bo-emite 4s ease-out infinite; }
.bo-emitidas span:nth-child(2) em { animation-delay: .3s; }
@keyframes bo-emite { 0%, 40% { opacity: 0; transform: scale(.6); } 50%, 100% { opacity: 1; transform: none; } }

/* La entrada llega con tu marca: «Mi cuenta» en la tienda y el celular con el PDF */
.bo-cuenta { left: 12px; top: 26px; width: 170px; padding-bottom: 6px; display: grid; gap: 4px; overflow: hidden; }
.bo-ticket-fila { display: grid; grid-template-columns: 20px 1fr auto; gap: 5px; align-items: center; margin: 0 7px; padding: 4px; border-radius: 5px; background: #F2F5F7; }
.bo-ticket-fila svg { width: 20px; height: 20px; }
.bo-ticket-fila b { display: block; font-size: 7px; font-weight: 800; }
.bo-ticket-fila small { display: block; font-size: 5.8px; font-weight: 600; color: #64748B; white-space: nowrap; }
.bo-ticket-fila em { padding: 2px 4px; border-radius: 2px; background: #DC2626; color: #fff; font-style: normal; font-size: 5px; font-weight: 800; }

/* Si se reembolsa, se anula: el pedido cambia de estado y la entrada recibe el sello */
.bo-pedido { left: 14px; top: 30px; width: 124px; padding: 8px 9px; display: grid; gap: 4px; }
.bo-pedido b { font-size: 8px; font-weight: 800; }
.bo-estado { display: grid; justify-self: start; }
.bo-estado > span { grid-area: 1 / 1; padding: 3px 8px; border-radius: 99px; color: #fff; font-size: 6.5px; font-weight: 800; }
.bo-estado .es-a { background: #0B8A63; animation: bo-a 6s infinite; }
.bo-estado .es-b { background: #DC2626; opacity: 0; animation: bo-b 6s infinite; }
@keyframes bo-a { 0%, 35% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes bo-b { 0%, 35% { opacity: 0; } 40%, 100% { opacity: 1; } }
.tq-papel.bo-anulada { left: auto; right: 34px; top: 34px; width: 92px; overflow: visible; transform: rotate(5deg); }
.bo-anulada b { font-size: 7.5px; }
.bo-anulada svg { width: 46px; height: 46px; }
.bo-sello { right: -14px; bottom: 26px; animation: bo-sello 6s ease-out infinite; }
@keyframes bo-sello { 0%, 45% { opacity: 0; transform: rotate(-14deg) scale(1.8); } 55%, 100% { opacity: .9; transform: rotate(-14deg) scale(1); } }