/* Bajomundo — hoja única.
   Neobrutalismo: bordes gruesos, sombras duras, cero esquinas redondas.
   Se hereda de Greb el amarillo (#F5DF4D) y se le suma el verde ácido, que es
   el color con el que se pinta el dinero del artista en todo el sitio: si el
   verde siempre es «lo que se lleva quien toca», el desglose se lee sin
   leyenda. */

:root {
  /* Fondo y tinta */
  --negro:    #0B0B0C;
  --negro-2:  #141416;
  --negro-3:  #1D1D20;
  --hueso:    #F2F0E9;
  --hueso-2:  #E2DFD4;
  --gris:     #8B8B93;

  /* La familia Greb */
  --amarillo: #F5DF4D;
  --amarillo-oscuro: #C9B424;

  /* Los acentos de Bajomundo */
  --verde:    #2BF07E;   /* el artista, lo que se cobra, lo que está bien */
  --verde-2:  #14B85D;
  --rosa:     #FF2E63;   /* en vivo, ahora, urgente */
  --violeta:  #8B5CF6;   /* la plataforma */

  /* Brutalismo de esquina redonda: el borde grueso y la sombra dura se quedan
     —son lo que da el golpe— y lo que se suaviza es la esquina. Un radio y no
     tres: si cada componente elige el suyo, la pantalla se deshilacha. */
  --radio:       16px;
  --radio-chico: 10px;
  --radio-pill:  999px;

  --borde:    3px solid var(--negro);
  --borde-claro: 3px solid var(--hueso);
  --sombra:   6px 6px 0 var(--negro);
  --sombra-amarilla: 6px 6px 0 var(--amarillo);
  --sombra-verde: 6px 6px 0 var(--verde);

  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --ui:      "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--amarillo); color: var(--negro); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.02;
                 letter-spacing: -0.02em; margin: 0; text-transform: uppercase; }

.bm-h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.bm-h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.bm-h3 { font-size: 1.15rem; letter-spacing: 0.01em;
         display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }

.bm-nota { color: var(--gris); font-size: 0.88rem; line-height: 1.5; margin: 0.4rem 0; }
.bm-mono { font-family: var(--mono); font-size: 0.85rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.bm-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.01em; text-transform: uppercase;
  padding: 0.75em 1.3em; border: var(--borde); background: var(--hueso);
  color: var(--negro); cursor: pointer; border-radius: var(--radio-pill);
  box-shadow: 4px 4px 0 var(--negro);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.bm-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--negro); }
.bm-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--negro); }
.bm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none;
                   box-shadow: 4px 4px 0 var(--negro); }

.bm-btn-verde    { background: var(--verde); }
.bm-btn-amarillo { background: var(--amarillo); }
.bm-btn-linea    { background: transparent; color: var(--hueso); border-color: var(--hueso);
                   box-shadow: 4px 4px 0 var(--hueso); }
.bm-btn-linea:hover { background: var(--hueso); color: var(--negro);
                      box-shadow: 6px 6px 0 var(--hueso); }
.bm-btn-grande { font-size: 1.05rem; padding: 0.95em 1.7em; }
.bm-btn-chico  { font-size: 0.78rem; padding: 0.5em 0.85em; box-shadow: 3px 3px 0 var(--negro); }
.bm-btn-linea.bm-btn-chico { box-shadow: 3px 3px 0 var(--hueso); }

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.bm-topbar {
  position: sticky; top: 0; z-index: 900;
  background: var(--negro); border-bottom: var(--borde-claro);
}
.bm-topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0.7rem 1.2rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.bm-marca { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.03em;
            text-transform: uppercase; flex: none; }
.bm-marca-bajo  { color: var(--hueso); }
.bm-marca-mundo { color: var(--amarillo); }

.bm-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto;
          font-size: 0.9rem; font-weight: 600; }
.bm-nav-a { padding: 0.2rem 0; border-bottom: 3px solid transparent;
            text-transform: uppercase; letter-spacing: 0.03em; }
.bm-nav-a:hover { border-bottom-color: var(--verde); }
.bm-nav-a.es-actual { border-bottom-color: var(--amarillo); color: var(--amarillo); }
.bm-nav-solo-movil { display: none; }

.bm-topbar-fin { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.bm-hamburguesa { display: none; background: none; border: 0; color: var(--hueso);
                  font-size: 1.5rem; cursor: pointer; padding: 0.2rem; }

/* ── Portada ─────────────────────────────────────────────────────────────── */

/* La portada lleva una foto de un barrio de noche detrás. Tres capas, y las
   tres hacen falta:
     .bm-hero-foto  la imagen, en `background` y no en <img> para poder anclarla
                    abajo y que el recorte en móvil se coma cielo y no casas.
     .bm-hero-velo  un degradado, no un velo plano: el titular tiene que leerse
                    arriba sin apagar las luces de las casas, que son el motivo.
     .bm-hero-in    el texto, por encima de las dos. */
.bm-hero {
  position: relative; overflow: hidden;
  border-bottom: var(--borde-claro);
  background: var(--negro);
  padding: clamp(4rem, 12vw, 8rem) 1.2rem clamp(3rem, 8vw, 5rem);
  isolation: isolate;
}
.bm-hero-foto {
  position: absolute; inset: 0; z-index: -2;
  background: url("/assets/img/barrio-noche.jpg") center bottom / cover no-repeat;
  /* Un punto de saturación de más y algo de contraste: la foto es de noche y
     sin esto las luces se apagan bajo el degradado. */
  /* La foto es de noche: sin subirle brillo y saturación se la come el
     degradado y el barrio deja de verse, que es justo lo que la pone ahí. */
  filter: saturate(1.35) contrast(1.08) brightness(1.25);
  animation: bm-hero-zoom 24s ease-out both;
}
.bm-hero-velo {
  position: absolute; inset: 0; z-index: -1;
  /* Lo justo para que el texto se lea, y ni una gota más. Antes esto era casi
     opaco y la foto no se veía: el degradado ahora solo trabaja donde hay
     letras —arriba a la izquierda— y deja el cerro limpio a la derecha. */
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.15) 40%,
                    rgba(11,11,12,.55) 82%, var(--negro) 100%),
    linear-gradient(100deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.35) 42%,
                    rgba(11,11,12,0) 72%);
}
@keyframes bm-hero-zoom {
  from { transform: scale(1.08) }
  to   { transform: scale(1) }
}
.bm-hero-in { max-width: var(--maxw); margin: 0 auto; position: relative; }
.bm-hero-in > * { animation: bm-entrar-arriba .55s cubic-bezier(.2,.8,.3,1) both; }
.bm-hero-in > :nth-child(2) { animation-delay: .06s }
.bm-hero-in > :nth-child(3) { animation-delay: .12s }
.bm-hero-in > :nth-child(4) { animation-delay: .18s }
.bm-hero-in > :nth-child(5) { animation-delay: .24s }

.bm-hero-titulo { text-shadow: 0 4px 30px rgba(0,0,0,.65); }
.bm-hero-cifras { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.2rem;
                  padding-top: 1.4rem; border-top: 1px solid rgba(242,240,233,.2);
                  font-size: 0.85rem; color: var(--hueso-2); }
.bm-hero-cifras b { color: var(--verde); font-family: var(--mono); }
.bm-hero-kicker { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.22em;
                  text-transform: uppercase; color: var(--verde); margin: 0 0 1rem; }
.bm-hero-titulo { font-size: clamp(2.8rem, 11vw, 7rem); line-height: 0.92; }
.bm-resalta { background: var(--amarillo); color: var(--negro); padding: 0 0.15em;
              display: inline-block; transform: rotate(-1.2deg); }
.bm-hero-bajada { max-width: 46ch; font-size: 1.15rem; color: var(--hueso-2);
                  margin: 1.6rem 0 2.2rem; }
.bm-hero-botones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── Secciones ───────────────────────────────────────────────────────────── */

.bm-seccion { padding: clamp(2.5rem, 6vw, 4.5rem) 1.2rem; border-bottom: var(--borde-claro); }
.bm-seccion.es-oscura { background: var(--negro-2); }
.bm-seccion-in { max-width: var(--maxw); margin: 0 auto; }
.bm-seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between;
                     gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.bm-seccion-bajada { color: var(--hueso-2); max-width: 60ch; margin: 0.6rem 0 2rem; }
.bm-verlo-todo { font-weight: 700; text-transform: uppercase; font-size: 0.85rem;
                 letter-spacing: 0.05em; border-bottom: 3px solid var(--verde); }

.bm-pagina { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.2rem 5rem; }
.bm-pagina-cabeza { margin-bottom: 2rem; }
.bm-pagina-bajada { color: var(--hueso-2); max-width: 62ch; margin-top: 0.8rem; }
.bm-migas { font-size: 0.85rem; color: var(--gris); margin-bottom: 0.6rem; }
.bm-migas a:hover { color: var(--verde); }

.bm-bloque { border: var(--borde-claro); background: var(--negro-2);
             padding: 1.5rem; margin: 1.8rem 0; border-radius: var(--radio); }

/* ── El reparto: la pieza de identidad del sitio ─────────────────────────── */
/* Verde = artista, amarillo = promotor, violeta = plataforma. Ese código de
   color se repite en la portada, en el formulario de reserva y en el panel,
   así que quien lo aprende una vez lo lee en todas partes sin leyenda. */

.bm-trato { background: var(--negro-2); }
.bm-trato-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 1.5rem; }
.bm-trato-caso { border: var(--borde-claro); background: var(--negro);
                 padding: 1.4rem; border-radius: var(--radio); }
.bm-trato-caso h3 { font-size: 1rem; color: var(--gris); margin-bottom: 1rem; }

.bm-reparto-total { display: flex; justify-content: space-between; align-items: baseline;
                    border-bottom: 3px solid var(--hueso); padding-bottom: 0.6rem;
                    margin-bottom: 1rem; }
.bm-reparto-total span { font-size: 0.8rem; text-transform: uppercase;
                         letter-spacing: 0.1em; color: var(--gris); }
.bm-reparto-total strong { font-family: var(--display); font-size: 1.5rem; }

.bm-reparto-barra { display: flex; height: 26px; border: var(--borde-claro);
                    margin-bottom: 1rem; border-radius: var(--radio-pill);
                    overflow: hidden; }
.bm-reparto-barra span { display: block; }
.bm-reparto-barra .es-artista    { background: var(--verde); }
.bm-reparto-barra .es-promotor   { background: var(--amarillo);
                                   border-left: 3px solid var(--negro); }
.bm-reparto-barra .es-plataforma { background: var(--violeta);
                                   border-left: 3px solid var(--negro); }

.bm-reparto-lista { list-style: none; margin: 0; padding: 0; }
.bm-reparto-lista li { display: grid; grid-template-columns: 4rem 1fr auto;
                       align-items: center; gap: 0.8rem; padding: 0.55rem 0;
                       border-bottom: 1px solid rgba(242,240,233,.12); }
.bm-reparto-pct { font-family: var(--display); font-size: 1.05rem; }
.bm-reparto-lista .es-artista    .bm-reparto-pct { color: var(--verde); }
.bm-reparto-lista .es-promotor   .bm-reparto-pct { color: var(--amarillo); }
.bm-reparto-lista .es-plataforma .bm-reparto-pct { color: var(--violeta); }
.bm-reparto-quien { font-size: 0.9rem; color: var(--hueso-2); }
.bm-reparto-monto { font-family: var(--mono); font-size: 0.92rem; }

.bm-trato-tickets { border: var(--borde); background: var(--amarillo); color: var(--negro);
                    padding: 1.6rem; margin-top: 1.5rem; box-shadow: var(--sombra);
                    border-radius: var(--radio); }
.bm-trato-tickets h3 { margin-bottom: 0.6rem; }
.bm-trato-tickets p { margin: 0 0 1.1rem; max-width: 62ch; }
.bm-trato-tickets .bm-btn-linea { color: var(--negro); border-color: var(--negro);
                                  box-shadow: 4px 4px 0 var(--negro); }
.bm-trato-tickets .bm-btn-linea:hover { background: var(--negro); color: var(--amarillo); }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.bm-rejilla { display: grid; gap: 1.2rem;
              grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.bm-tarjeta { border: var(--borde-claro); background: var(--negro);
              border-radius: var(--radio); overflow: hidden;
              transition: transform .14s cubic-bezier(.2,.9,.3,1.2),
                          box-shadow .14s ease; }
.bm-tarjeta:hover { transform: translate(-3px, -3px); box-shadow: var(--sombra-amarilla); }
.bm-tarjeta-cuerpo { padding: 0.9rem 1rem 1.1rem; }
.bm-tarjeta-cuerpo h3 { font-size: 1.02rem; line-height: 1.1; }
.bm-tarjeta-fecha { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
                    letter-spacing: 0.1em; color: var(--verde); margin: 0 0 0.35rem; }
.bm-tarjeta-lugar, .bm-tarjeta-generos { font-size: 0.85rem; color: var(--gris);
                                         margin: 0.4rem 0 0; display: flex;
                                         align-items: center; gap: 0.3rem; }
.bm-tarjeta-tarifa { font-family: var(--mono); font-size: 0.8rem; color: var(--verde);
                     margin: 0.5rem 0 0; }

.bm-tarjeta-flyer, .bm-artista-foto { position: relative; aspect-ratio: 1 / 1;
                                      overflow: hidden; border-bottom: var(--borde-claro); }
.bm-tarjeta-flyer img, .bm-artista-foto img { width: 100%; height: 100%; object-fit: cover; }
.bm-flyer-vacio { width: 100%; height: 100%; display: grid; place-items: center;
                  background: repeating-linear-gradient(45deg, var(--negro-2) 0 12px,
                              var(--negro-3) 12px 24px);
                  color: var(--gris); font-size: 2.5rem; }

.bm-vivo { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--rosa);
           color: #fff; font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
           letter-spacing: 0.15em; padding: 0.25rem 0.5rem; border: 2px solid var(--negro);
           animation: bm-latido 1.6s infinite; }
@keyframes bm-latido { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.bm-sello { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em;
            background: var(--verde); color: var(--negro); font-size: 0.7em;
            margin-left: 0.35em; vertical-align: middle; font-weight: 900; }

.bm-chip { display: inline-block; border: 2px solid var(--hueso); padding: 0.15rem 0.5rem;
           border-radius: var(--radio-pill);
           font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
           font-weight: 600; }
.bm-chip-link { display: inline-flex; align-items: center; gap: 0.3rem;
                border-radius: var(--radio-pill);
                border: 2px solid var(--amarillo); color: var(--amarillo);
                padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 600; }
.bm-chip-link:hover { background: var(--amarillo); color: var(--negro); }

/* ── Listas: artistas, fiestas, locales ──────────────────────────────────── */

.bm-lista-artistas, .bm-lista-fiestas, .bm-lista-locales { display: flex;
                     flex-direction: column; gap: 0.9rem; }

.bm-artista-fila, .bm-fiesta-fila, .bm-local-fila {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 1.1rem; align-items: center;
  border: var(--borde-claro); background: var(--negro-2); padding: 0.8rem;
  border-radius: var(--radio);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.2), box-shadow .14s ease,
              background .15s ease;
}
.bm-artista-fila:hover, .bm-fiesta-fila:hover, .bm-local-fila:hover {
  transform: translate(-3px, -3px); box-shadow: var(--sombra-verde);
  background: var(--negro-3);
}
.bm-artista-fila .bm-artista-foto, .bm-fiesta-flyer, .bm-local-foto {
  width: 88px; height: 88px; border: 2px solid var(--hueso); position: relative;
  overflow: hidden; aspect-ratio: auto; border-radius: var(--radio-chico);
}
.bm-artista-fila h3, .bm-fiesta-datos h3, .bm-local-datos h3 { font-size: 1.15rem; }
.bm-artista-generos, .bm-fiesta-generos, .bm-local-tipo { color: var(--gris);
                     font-size: 0.85rem; margin: 0.25rem 0 0; text-transform: lowercase; }
.bm-artista-ciudad, .bm-fiesta-lugar, .bm-local-aforo { color: var(--gris);
                    font-size: 0.82rem; margin: 0.3rem 0 0;
                    display: flex; align-items: center; gap: 0.3rem; }
/* El rango en una línea cuando cabe: partido en tres renglones se lee como
   tres cifras distintas en vez de como un rango. */
.bm-artista-tarifa { text-align: right; display: flex; flex-wrap: wrap;
                     align-items: baseline; justify-content: flex-end;
                     gap: 0.3rem; max-width: 22rem; }
.bm-artista-tarifa .bm-artista-set { flex-basis: 100%; }
.bm-tarifa-rango { font-family: var(--mono); font-size: 0.9rem; color: var(--verde); }
.bm-tarifa-sep { color: var(--gris); font-size: 0.7rem; }
.bm-tarifa-nada { color: var(--gris); font-size: 0.85rem; }
.bm-artista-set { font-size: 0.72rem; color: var(--gris); text-transform: uppercase;
                  letter-spacing: 0.08em; }
.bm-fiesta-fecha { font-family: var(--mono); font-size: 0.78rem; color: var(--verde);
                   text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.bm-filtros { margin-bottom: 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; }
.bm-filtros-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bm-chip-btn { border: 2px solid var(--hueso); background: transparent; color: var(--hueso);
               border-radius: var(--radio-pill);
               font-family: var(--ui); font-weight: 600; font-size: 0.8rem;
               text-transform: uppercase; letter-spacing: 0.05em;
               padding: 0.35rem 0.7rem; cursor: pointer; }
.bm-chip-btn:hover { background: var(--negro-3); }
.bm-chip-btn.es-activo { background: var(--amarillo); color: var(--negro);
                         border-color: var(--amarillo); }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.bm-campo { display: block; margin-bottom: 1rem; }
.bm-campo-label { display: flex; align-items: center; gap: 0.4rem;
                  font-size: 0.75rem; text-transform: uppercase;
                  letter-spacing: 0.12em; color: var(--gris); margin-bottom: 0.35rem;
                  font-weight: 600; }

/* El icono del rótulo. Verde y algo más grande que la palabra, a propósito: en
   un formulario de diez campos los rótulos son todos gris y mayúscula, y la
   vista no los distingue hasta leerlos. El icono se ve antes. */
.bm-campo-icono { display: inline-flex; color: var(--verde); font-size: 1.05rem;
                  opacity: .75; flex: none;
                  transition: opacity .12s ease, transform .12s ease; }
.bm-campo:focus-within .bm-campo-icono { opacity: 1; transform: scale(1.12); }
.bm-campo:focus-within .bm-campo-label { color: var(--hueso); }
.bm-check-icono { display: inline-flex; color: var(--verde); font-size: 1.05rem;
                  flex: none; }

/* Campo de foto. El input de archivo va escondido detrás de la etiqueta: el
   control nativo del navegador no se puede pintar y se veía como un remiendo
   gris en medio del panel. */
.bm-foto-campo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bm-foto-input { position: absolute; width: 1px; height: 1px; opacity: 0;
                 pointer-events: none; }
.bm-foto-campo label { cursor: pointer; }
.bm-foto-muestra { width: 4.5rem; height: 4.5rem; object-fit: cover; flex: none;
                   border: var(--borde-claro); border-radius: var(--radio-chico);
                   background: var(--negro-3); }
.bm-campo-pista.es-fallo { color: var(--rosa); font-family: var(--ui); }

/* Los iconos que van dentro de una frase —en un botón, en una nota— se apoyan
   sobre la línea base del texto; sin esto flotan medio cuerpo por encima. */
.bm-btn svg, .bm-nota svg, .bm-h3 svg { vertical-align: -0.15em; flex: none; }
.bm-nota svg { color: var(--verde); margin-right: 0.15rem; }
.bm-input {
  width: 100%; background: var(--negro); color: var(--hueso);
  border: var(--borde-claro); border-radius: var(--radio-chico);
  padding: 0.7rem 0.85rem; font-family: var(--ui); font-size: 1rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bm-input:focus { outline: 0; border-color: var(--verde); box-shadow: 4px 4px 0 var(--verde); }
.bm-input-grande { font-family: var(--mono); font-size: 1.6rem; padding: 0.6rem 0.85rem; }
.bm-input-codigo { font-family: var(--mono); text-transform: uppercase;
                   letter-spacing: 0.12em; }
.bm-input-chico { padding: 0.35rem 0.5rem; font-size: 0.85rem; width: auto; }
.bm-dos-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                 gap: 0.9rem; }
select.bm-input { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hueso) 50%),
                    linear-gradient(135deg, var(--hueso) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat; }

.bm-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem;
            border: 2px solid var(--negro-3); cursor: pointer; font-size: 0.85rem;
            border-radius: var(--radio-chico); transition: border-color .12s ease,
            background .12s ease; }
.bm-check:hover { border-color: var(--gris); }
.bm-check.es-marcado { border-color: var(--verde); background: rgba(43,240,126,.08); }
.bm-check input { accent-color: var(--verde); width: 1.05rem; height: 1.05rem; }

.bm-aviso { border: var(--borde); padding: 0.8rem 1rem; margin: 1rem 0; font-weight: 600;
            color: var(--negro); border-radius: var(--radio-chico);
            animation: bm-entrar-arriba .25s ease both; }
.bm-aviso.es-mal  { background: var(--rosa); color: #fff; }
.bm-aviso.es-bien { background: var(--verde); }

/* ── Calendario ──────────────────────────────────────────────────────────── */

.bm-cal { border: var(--borde-claro); background: var(--negro); padding: 1rem;
          max-width: 420px; border-radius: var(--radio); }
.bm-cal-cabeza { display: flex; align-items: center; justify-content: space-between;
                 margin-bottom: 0.9rem; }
.bm-cal-mes { font-family: var(--display); text-transform: uppercase; font-size: 1rem; }
.bm-cal-flecha { background: transparent; border: 2px solid var(--hueso); color: var(--hueso);
                 width: 2rem; height: 2rem; cursor: pointer; font-size: 1.1rem;
                 line-height: 1; border-radius: var(--radio-pill); }
.bm-cal-flecha:hover { background: var(--amarillo); color: var(--negro);
                       border-color: var(--amarillo); }
.bm-cal-dias, .bm-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr);
                                gap: 3px; }
.bm-cal-dia-nombre { font-family: var(--mono); font-size: 0.65rem; text-align: center;
                     color: var(--gris); text-transform: uppercase; padding-bottom: 0.3rem; }
.bm-cal-hueco { aspect-ratio: 1; }
.bm-cal-celda { aspect-ratio: 1; border: 2px solid var(--negro-3); background: transparent;
                color: var(--hueso); font-family: var(--mono); font-size: 0.8rem;
                cursor: pointer; padding: 0; border-radius: var(--radio-chico);
                transition: transform .1s ease, background .12s ease; }
.bm-cal-celda.es-libre:hover:not(:disabled) { background: var(--verde); color: var(--negro);
                                              border-color: var(--verde); }
.bm-cal-celda.es-ocupado   { background: var(--rosa); color: #fff; border-color: var(--rosa);
                             cursor: not-allowed; }
.bm-cal-celda.es-bloqueado { background: var(--negro-3); color: var(--gris);
                             border-color: var(--gris); }
.bm-cal-celda.es-pasado    { opacity: .25; cursor: default; }
.bm-cal-celda.es-elegido   { background: var(--amarillo); color: var(--negro);
                             border-color: var(--amarillo); font-weight: 700; }
.bm-cal-leyenda { display: flex; gap: 1rem; margin-top: 0.9rem; font-size: 0.72rem;
                  color: var(--gris); }
.bm-cal-leyenda span { display: flex; align-items: center; gap: 0.35rem; }
.bm-cal-leyenda i { width: 0.8rem; height: 0.8rem; display: block; border: 2px solid; }
.bm-cal-leyenda i.es-libre     { border-color: var(--verde); }
.bm-cal-leyenda i.es-ocupado   { background: var(--rosa); border-color: var(--rosa); }
.bm-cal-leyenda i.es-bloqueado { background: var(--negro-3); border-color: var(--gris); }

/* ── Ficha ───────────────────────────────────────────────────────────────── */

.bm-ficha-cabeza { display: grid; grid-template-columns: 280px 1fr; gap: 2rem;
                   margin-bottom: 2rem; }
.bm-ficha-foto { border: var(--borde-claro); aspect-ratio: 1; overflow: hidden;
                 box-shadow: var(--sombra-amarilla); border-radius: var(--radio); }
.bm-ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.bm-ficha-nombre { color: var(--gris); margin: 0.3rem 0 0; }
.bm-ficha-generos { color: var(--verde); font-family: var(--mono); font-size: 0.9rem;
                    text-transform: lowercase; margin: 0.5rem 0 0; }
.bm-ficha-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0; }
.bm-ficha-tarifa { border: var(--borde); background: var(--amarillo); color: var(--negro);
                   padding: 0.9rem 1.1rem; margin: 1.2rem 0; box-shadow: var(--sombra);
                   border-radius: var(--radio); }
.bm-ficha-tarifa-label { display: block; font-size: 0.7rem; text-transform: uppercase;
                         letter-spacing: 0.14em; font-weight: 700; }
.bm-ficha-tarifa strong { font-family: var(--mono); font-size: 1.25rem; }
.bm-bio { color: var(--hueso-2); max-width: 68ch; }

.bm-rider { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bm-rider li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
               border: 2px solid var(--negro-3); font-size: 0.88rem;
               border-radius: var(--radio-chico); }
.bm-rider li.es-clave { border-color: var(--amarillo); }
.bm-rider-cant { font-family: var(--mono); color: var(--verde); font-size: 0.8rem; }
.bm-rider-clave { margin-left: auto; font-size: 0.65rem; text-transform: uppercase;
                  color: var(--amarillo); letter-spacing: 0.08em; }
.bm-nota-setup { margin-top: 0.9rem; color: var(--hueso-2); font-size: 0.9rem;
                 border-left: 3px solid var(--amarillo); padding-left: 0.8rem; }

.bm-ruta { list-style: none; margin: 0; padding: 0; }
.bm-ruta li { display: grid; grid-template-columns: 4rem 1fr auto; gap: 0.8rem;
              align-items: center; padding: 0.6rem 0;
              border-bottom: 1px solid rgba(242,240,233,.1); }
.bm-ruta-hora { font-family: var(--mono); color: var(--amarillo); font-size: 0.85rem; }
.bm-ruta-barrio { color: var(--gris); }
.bm-ruta-estado { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
                  color: var(--gris); }
.bm-ruta li.es-tocando   .bm-ruta-estado { color: var(--rosa); font-weight: 700; }
.bm-ruta li.es-en_camino .bm-ruta-estado { color: var(--amarillo); }
.bm-ruta-cuando { color: var(--gris); font-style: normal; font-size: 0.7rem; }

/* ── Reservar ────────────────────────────────────────────────────────────── */

.bm-reservar-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                   gap: 2rem; }
.bm-fecha-elegida { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.9rem;
                    color: var(--verde); }
.bm-desglose { border: var(--borde-claro); background: var(--negro-2); padding: 1rem;
               margin: 1rem 0; border-radius: var(--radio); }
.bm-desglose h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
                  color: var(--gris); margin: 0 0 0.6rem; font-family: var(--ui); }
.bm-desglose ul { list-style: none; margin: 0; padding: 0; }
.bm-desglose li { display: grid; grid-template-columns: 1fr auto 3rem; gap: 0.6rem;
                  align-items: baseline; padding: 0.35rem 0; }
.bm-desglose li b { font-family: var(--mono); }
.bm-desglose li i { font-family: var(--mono); font-size: 0.75rem; text-align: right;
                    font-style: normal; }
.bm-desglose .es-artista    b, .bm-desglose .es-artista i    { color: var(--verde); }
.bm-desglose .es-promotor   b, .bm-desglose .es-promotor i   { color: var(--amarillo); }
.bm-desglose .es-plataforma b, .bm-desglose .es-plataforma i { color: var(--violeta); }

.bm-setup { border: var(--borde-claro); background: var(--negro-2); padding: 1.3rem;
            margin: 2rem 0; border-radius: var(--radio); }
.bm-setup h4 { font-family: var(--display); text-transform: uppercase; font-size: 1rem;
               display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; }
.bm-setup-items { display: grid; gap: 0.45rem;
                  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bm-reservar-enviar { text-align: center; margin-top: 2rem; }

.bm-confirmado { display: grid; place-items: center; min-height: 60vh; }
.bm-confirmado-caja { border: var(--borde); background: var(--verde); color: var(--negro);
                      padding: 2.5rem; max-width: 560px; box-shadow: var(--sombra);
                      border-radius: var(--radio); }
.bm-confirmado-kicker { font-family: var(--mono); text-transform: uppercase;
                        letter-spacing: 0.2em; font-size: 0.75rem; margin: 0 0 0.6rem; }
.bm-confirmado-caja .bm-h1 { font-family: var(--mono); letter-spacing: 0.05em; }
.bm-confirmado-reparto { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.2rem 0;
                         border-top: 3px solid var(--negro); padding-top: 1rem;
                         font-family: var(--mono); font-size: 0.9rem; }
.bm-confirmado-caja .bm-nota { color: rgba(11,11,12,.7); }
.bm-confirmado-caja .bm-btn-linea { color: var(--negro); border-color: var(--negro);
                                    box-shadow: 4px 4px 0 var(--negro); }

/* ── Mapa ────────────────────────────────────────────────────────────────── */
/* El mapa ocupa la ventana entera menos la barra: es una pantalla para mirar
   de pie y con una mano, no un bloque dentro de una página. */

.bm-app.es-mapa .bm-vista { height: calc(100vh - 62px); }
.bm-mapa { position: relative; width: 100%; height: 100%; }
.bm-mapa-lienzo { position: absolute; inset: 0; background: var(--negro-2); }
.bm-mapa-encima { position: absolute; inset: 0; pointer-events: none; z-index: 500;
                  display: flex; flex-direction: column; justify-content: space-between; }
.bm-mapa-cabeza { pointer-events: auto; margin: 1rem; align-self: flex-start;
                  border: var(--borde); background: var(--amarillo); color: var(--negro);
                  padding: 0.9rem 1.2rem; box-shadow: var(--sombra); max-width: 320px;
                  border-radius: var(--radio); }
.bm-mapa-cabeza h1 { font-size: 1.5rem; }
.bm-mapa-cabeza p { margin: 0.25rem 0 0; font-family: var(--mono); font-size: 0.82rem; }
.bm-mapa-vivo-leyenda { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem;
                        font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.bm-mapa-vivo-leyenda i { width: 0.7rem; height: 0.7rem; display: inline-block;
                          border: 2px solid var(--negro); }
.bm-mapa-vivo-leyenda i.es-vivo { background: var(--rosa); }
.bm-mapa-vivo-leyenda i.es-programada { background: var(--verde); margin-left: 0.6rem; }

.bm-mapa-panel { pointer-events: auto; margin: 1rem; border: var(--borde);
                 background: var(--negro); color: var(--hueso); padding: 1.3rem;
                 box-shadow: var(--sombra-verde); max-width: 420px; position: relative;
                 max-height: 60vh; overflow-y: auto; border-radius: var(--radio);
                 animation: bm-entrar-abajo .3s cubic-bezier(.2,.9,.3,1.2) both; }
.bm-mapa-cerrar { position: absolute; top: 0.6rem; right: 0.6rem; background: none;
                  border: 0; color: var(--gris); cursor: pointer; font-size: 1.1rem; }
.bm-mapa-fecha { font-family: var(--mono); font-size: 0.75rem; color: var(--verde);
                 text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.3rem; }
.bm-mapa-lugar { font-size: 0.88rem; color: var(--gris); display: flex; align-items: center;
                 gap: 0.3rem; margin: 0.5rem 0 1rem; }
.bm-mapa-lineup { list-style: none; margin: 0 0 1.2rem; padding: 0; }
/* `minmax(0, …)` en las dos columnas elásticas: sin eso, un nombre largo o un
   «tocando · hace 2 min» empujan la fila fuera del panel y el estado se corta
   justo por donde importa. */
.bm-mapa-lineup li, .bm-lineup li { display: grid;
                   grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, auto);
                   gap: 0.6rem; align-items: center; padding: 0.5rem 0;
                   border-bottom: 1px solid rgba(242,240,233,.1); }
.bm-lineup-hora { font-family: var(--mono); font-size: 0.82rem; color: var(--amarillo); }
/* El estado se deja envolver en dos líneas y con un ancho tope: «tocando · hace
   11 min» no cabe en una sola dentro del panel del mapa, y antes se cortaba
   justo por la parte que informa. */
.bm-lineup-estado { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em;
                    color: var(--gris); text-align: right; line-height: 1.25;
                    max-width: 6.5rem; white-space: normal; }
.bm-lineup-nombre, .bm-mapa-lineup li a { overflow: hidden; text-overflow: ellipsis;
                                          white-space: nowrap; }
.bm-mapa-lineup li.es-tocando, .bm-lineup li.es-tocando { background: rgba(255,46,99,.1); }
.bm-mapa-lineup li.es-tocando .bm-lineup-estado,
.bm-lineup li.es-tocando .bm-lineup-estado { color: var(--rosa); font-weight: 700; }
.bm-mapa-lineup li.es-en_camino .bm-lineup-estado,
.bm-lineup li.es-en_camino .bm-lineup-estado { color: var(--amarillo); }
.bm-lineup { list-style: none; margin: 0; padding: 0; }
.bm-lineup-nombre { font-weight: 700; }
.bm-lineup-generos { display: none; }

/* Los marcadores son HTML puesto por Leaflet (divIcon), así que se les da
   forma desde aquí y no hace falta generar imágenes por color.

   El `!important` no es pereza: Leaflet escribe width/height en el style del
   contenedor a partir de `iconSize`, y con un rótulo de ancho variable no hay
   número que poner ahí. Devolviéndole `auto` la caja la mide el texto. */
.bm-marcador-wrap { width: auto !important; height: auto !important; }
.bm-marcador { display: inline-flex; align-items: center; gap: 0.4rem;
               border-radius: var(--radio-pill);
               transform: translate(-9px, -50%); width: max-content;
               background: var(--negro); border: 2px solid var(--verde); color: var(--hueso);
               padding: 0.25rem 0.5rem; font-family: var(--ui); font-size: 0.78rem;
               font-weight: 700; white-space: nowrap; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.bm-marcador-punto { width: 0.55rem; height: 0.55rem; background: var(--verde); flex: none; }
.bm-marcador i { display: block; font-style: normal; font-weight: 400; font-size: 0.68rem;
                 color: var(--gris); }
.bm-marcador.es-vivo { border-color: var(--rosa); }
.bm-marcador.es-vivo .bm-marcador-punto { background: var(--rosa);
                                          animation: bm-latido 1.2s infinite; }
.bm-marcador.es-vivo i { color: var(--rosa); }

/* ── El punto de un sitio ────────────────────────────────────────────────────
   Más callado que el de una fiesta a propósito: sin logo, sin fondo sólido y
   con la letra chica. Los locales son el decorado permanente de la ciudad; lo
   que pasa esta noche tiene que ganarles a la vista sin esfuerzo. El color
   dice qué es sin obligar a pinchar. */
.bm-sitio { display: inline-flex; align-items: center; gap: 0.3rem;
            transform: translate(-6px, -50%); width: max-content;
            font-family: var(--ui); font-size: 0.66rem; font-weight: 600;
            white-space: nowrap; color: var(--hueso-2);
            text-shadow: 0 1px 3px rgba(0,0,0,.9); cursor: pointer;
            transition: transform .12s ease, color .12s ease; }
.bm-sitio:hover { transform: translate(-6px, -50%) scale(1.12); color: #fff; }
.bm-sitio-punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none;
                  border: 2px solid var(--negro); background: var(--gris);
                  box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.bm-sitio.es-discoteca .bm-sitio-punto { background: #C06BFF; }
.bm-sitio.es-bar       .bm-sitio-punto { background: #FF9F1C; }
.bm-sitio.es-terraza   .bm-sitio-punto { background: #2BF07E; }
.bm-sitio.es-azotea    .bm-sitio-punto { background: #00D4FF; }
.bm-sitio.es-casa      .bm-sitio-punto { background: #FF2E63; }
.bm-sitio.es-colmadón  .bm-sitio-punto { background: #F5DF4D; }
.bm-sitio.es-galería   .bm-sitio-punto { background: #E619C4; }

/* Los filtros de la cabecera. Van sobre el amarillo de la cabeza, así que el
   activo se marca en negro sólido y no con otro color: sobre amarillo, dos
   colores compiten y ninguno gana. */
.bm-mapa-filtros { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
.bm-mapa-filtro { display: inline-flex; align-items: center; gap: 0.35rem;
                  border: 2px solid var(--negro); background: transparent;
                  color: var(--negro); border-radius: var(--radio-pill);
                  padding: 0.25rem 0.7rem; cursor: pointer; font-family: var(--ui);
                  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: 0.06em; transition: background .12s ease, color .12s ease; }
.bm-mapa-filtro b { font-family: var(--mono); font-size: 0.7rem; opacity: .65; }
.bm-mapa-filtro:hover { background: rgba(11,11,12,.12); }
.bm-mapa-filtro.es-activo { background: var(--negro); color: var(--amarillo); }
.bm-mapa-filtro.es-activo b { opacity: .8; }

.bm-mapa-panel.es-local { box-shadow: var(--sombra); }
.bm-mapa-panel.es-local .bm-mapa-fecha { color: var(--amarillo); }
.bm-mapa-foto { border-radius: var(--radio-chico); overflow: hidden; aspect-ratio: 16/9;
                margin: 0.2rem 0 0.6rem; }
.bm-mapa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leaflet-container { background: var(--negro-2); font-family: var(--ui); }
.leaflet-control-attribution { background: rgba(11,11,12,.75) !important;
                               color: var(--gris) !important; font-size: 0.65rem; }
.leaflet-control-attribution a { color: var(--gris) !important; }
.leaflet-bar a { background: var(--negro) !important; color: var(--hueso) !important;
                 border-color: var(--hueso) !important; }

/* ── Fiesta ──────────────────────────────────────────────────────────────── */

.bm-fiesta-cabeza { display: grid; grid-template-columns: 340px 1fr; gap: 2rem;
                    margin-bottom: 2rem; }
.bm-fiesta-flyer-grande { border: var(--borde-claro); aspect-ratio: 4/5; overflow: hidden;
                          box-shadow: var(--sombra-verde); border-radius: var(--radio); }
.bm-fiesta-flyer-grande img { width: 100%; height: 100%; object-fit: cover; }
.bm-fiesta-ficha .bm-vivo { position: static; display: inline-block; margin-bottom: 0.8rem; }
.bm-fiesta-texto { color: var(--hueso-2); max-width: 64ch; margin: 1rem 0; }
.bm-oculta { color: var(--amarillo); font-style: normal; font-size: 0.85rem; }

/* ── Entradas ────────────────────────────────────────────────────────────── */

.bm-compra { border-color: var(--amarillo); }
.bm-tipos { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            margin-bottom: 1.4rem; }
.bm-tipo { border: var(--borde-claro); background: var(--negro); color: var(--hueso);
           padding: 0.9rem; cursor: pointer; text-align: left; display: flex;
           flex-direction: column; gap: 0.2rem; font-family: var(--ui);
           border-radius: var(--radio-chico); transition: transform .12s ease,
           border-color .12s ease, background .12s ease; }
.bm-tipo:hover:not(:disabled) { border-color: var(--amarillo); }
.bm-tipo.es-elegido { background: var(--amarillo); color: var(--negro);
                      border-color: var(--amarillo); }
.bm-tipo:disabled { opacity: .4; cursor: not-allowed; }
.bm-tipo-nombre { font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }
.bm-tipo-precio { font-family: var(--mono); font-size: 1.1rem; }
.bm-tipo-quedan { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
                  color: var(--gris); }
.bm-tipo.es-elegido .bm-tipo-quedan { color: rgba(11,11,12,.65); }

.bm-cotizacion { border: 2px solid var(--verde); padding: 0.9rem; margin: 1rem 0;
                 border-radius: var(--radio-chico);
                 animation: bm-entrar-arriba .22s ease both; }
.bm-cotizacion-bien { color: var(--verde); font-size: 0.85rem; margin: 0 0 0.5rem; }
.bm-cotizacion-mal  { color: var(--rosa); font-size: 0.85rem; margin: 0 0 0.5rem; }
.bm-cotizacion-total { display: flex; align-items: baseline; gap: 0.7rem; }
.bm-cotizacion-total span { font-size: 0.75rem; text-transform: uppercase;
                            letter-spacing: 0.12em; color: var(--gris); }
.bm-cotizacion-total strong { font-family: var(--display); font-size: 1.5rem;
                              color: var(--verde); }
.bm-cotizacion-total s { font-family: var(--mono); color: var(--gris); font-size: 0.85rem; }

.bm-entrada-hecha { border: var(--borde); background: var(--amarillo); color: var(--negro);
                    padding: 1.8rem; box-shadow: var(--sombra); border-radius: var(--radio);
                    animation: bm-pop .4s cubic-bezier(.2,.9,.3,1.3) both; }
.bm-entrada-kicker { font-family: var(--mono); text-transform: uppercase;
                     letter-spacing: 0.2em; font-size: 0.72rem; margin: 0 0 0.4rem; }
.bm-entrada-codigo { font-family: var(--mono); font-size: 2rem; letter-spacing: 0.08em; }
.bm-entrada-ahorro { color: var(--verde-2); font-weight: 700; }
.bm-entrada-hecha .bm-nota { color: rgba(11,11,12,.7); }

/* ── Panel ───────────────────────────────────────────────────────────────── */

.bm-panel-cabeza { display: flex; align-items: flex-start; justify-content: space-between;
                   gap: 1rem; margin-bottom: 1.5rem; }
.bm-panel-rol { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
                letter-spacing: 0.18em; color: var(--verde); margin: 0.3rem 0 0; }
.bm-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: var(--borde-claro);
           margin-bottom: 1.8rem; }
.bm-tab { padding: 0.65rem 1.1rem; border: 3px solid transparent; border-bottom: 0;
          font-weight: 700; text-transform: uppercase; font-size: 0.8rem;
          letter-spacing: 0.05em; margin-bottom: -3px;
          border-radius: var(--radio-chico) var(--radio-chico) 0 0; }
.bm-tab:hover { color: var(--verde); }
.bm-tab.es-actual { border-color: var(--hueso); background: var(--negro-2);
                    color: var(--amarillo); }

.bm-bookings { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; }
.bm-booking { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 1.1rem;
              align-items: center; border: var(--borde-claro); background: var(--negro-2);
              padding: 0.9rem; border-radius: var(--radio); }
.bm-booking.es-solicitado { border-color: var(--amarillo); }
.bm-booking.es-confirmado { border-color: var(--verde); }
.bm-booking.es-cancelado, .bm-booking.es-rechazado { opacity: .5; }
.bm-booking-fecha { display: grid; place-items: center; border: 2px solid var(--hueso);
                    padding: 0.4rem; border-radius: var(--radio-chico); }
.bm-booking-dia { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.bm-booking-mes { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
                  color: var(--gris); }
.bm-booking-datos h4 { font-size: 1rem; }
.bm-booking-hora { font-size: 0.82rem; color: var(--gris); margin: 0.25rem 0 0; }
.bm-booking-codigo { font-family: var(--mono); color: var(--amarillo); }
.bm-booking-plata { text-align: right; display: flex; flex-direction: column; }
.bm-booking-tuyo { font-family: var(--mono); font-size: 1.1rem; color: var(--verde); }
.bm-booking-total { font-size: 0.7rem; color: var(--gris); font-family: var(--mono); }
.bm-booking-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bm-estado-ok { color: var(--verde); font-size: 0.78rem; text-transform: uppercase;
                letter-spacing: 0.06em; font-weight: 700; }
.bm-estado-no { color: var(--gris); font-size: 0.78rem; text-transform: uppercase; }

.bm-cifras { display: grid; gap: 0.8rem; margin: 1.2rem 0 2rem;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bm-cifra { border: var(--borde-claro); background: var(--negro-2); padding: 0.9rem 1rem;
            border-radius: var(--radio); }
.bm-cifra span { display: block; font-size: 0.68rem; text-transform: uppercase;
                 letter-spacing: 0.12em; color: var(--gris); margin-bottom: 0.3rem; }
.bm-cifra b { font-family: var(--mono); font-size: 1.25rem; }
.bm-cifra.es-verde { border-color: var(--verde); }
.bm-cifra.es-verde b { color: var(--verde); }

.bm-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bm-tabla td { border-bottom: 1px solid rgba(242,240,233,.12); padding: 0.6rem 0.5rem;
               vertical-align: middle; }
.bm-pastilla { display: inline-block; border: 2px solid var(--gris); color: var(--gris);
               padding: 0.05rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
               letter-spacing: 0.06em; font-weight: 700; border-radius: var(--radio-pill); }
.bm-pastilla.es-confirmado, .bm-pastilla.es-pagado { border-color: var(--verde);
                                                     color: var(--verde); }
.bm-pastilla.es-solicitado { border-color: var(--amarillo); color: var(--amarillo); }

.bm-lista-fiestas-panel { display: flex; flex-direction: column; gap: 0.7rem;
                          margin: 1.5rem 0; }
.bm-fiesta-panel { display: flex; align-items: center; justify-content: space-between;
                   gap: 1rem; border: var(--borde-claro); background: var(--negro-2);
                   padding: 0.9rem; flex-wrap: wrap; border-radius: var(--radio); }
.bm-fiesta-panel.es-borrador { border-style: dashed; opacity: .8; }
.bm-fiesta-panel.es-en_curso { border-color: var(--rosa); }
.bm-fiesta-panel h4 { font-size: 1rem; }

.bm-codigos { display: grid; gap: 0.9rem;
              grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bm-codigo { border: var(--borde); background: var(--amarillo); color: var(--negro);
             padding: 1.1rem; box-shadow: var(--sombra); border-radius: var(--radio); }
.bm-codigo-texto { font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
                   letter-spacing: 0.1em; background: none; border: 0; padding: 0;
                   cursor: pointer; color: var(--negro); }
.bm-codigo-texto:hover { text-decoration: underline; }
.bm-codigo-datos p { margin: 0.4rem 0 0; font-size: 0.85rem; }
.bm-codigo-datos .bm-nota { color: rgba(11,11,12,.65); }
.bm-codigo-plata { font-family: var(--display); font-size: 1.6rem; margin-top: 0.7rem;
                   border-top: 3px solid var(--negro); padding-top: 0.5rem; }

.bm-clave-nueva { border: var(--borde); background: var(--verde); color: var(--negro);
                  padding: 1.3rem; margin-bottom: 1.5rem; box-shadow: var(--sombra);
                  border-radius: var(--radio); animation: bm-pop .35s
                  cubic-bezier(.2,.9,.3,1.3) both; }
.bm-clave { font-family: var(--mono); font-size: 1.8rem; letter-spacing: 0.1em;
            margin: 0.6rem 0; }
.bm-clave-nueva .bm-nota { color: rgba(11,11,12,.7); }

/* ── Cómo funciona ───────────────────────────────────────────────────────── */

.bm-pasos { display: grid; gap: 1rem; }
.bm-paso { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.bm-paso-n { font-family: var(--display); font-size: 1.8rem; color: var(--amarillo);
             line-height: 1; }
.bm-paso h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.bm-paso p { margin: 0; color: var(--hueso-2); font-size: 0.92rem; max-width: 62ch; }
.bm-lista-clara { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.bm-lista-clara li { border-left: 3px solid var(--verde); padding-left: 0.9rem;
                     color: var(--hueso-2); font-size: 0.92rem; max-width: 68ch; }
.bm-ejemplo-codigo ul { list-style: none; margin: 1rem 0 0; padding: 0;
                        border: var(--borde-claro); border-radius: var(--radio);
                        overflow: hidden; }
.bm-ejemplo-codigo li { display: flex; justify-content: space-between; padding: 0.6rem 0.9rem;
                        border-bottom: 1px solid rgba(242,240,233,.12); font-size: 0.9rem; }
.bm-ejemplo-codigo li b { font-family: var(--mono); }
.bm-ejemplo-codigo li.es-total { background: var(--negro-3); }
.bm-ejemplo-codigo li.es-total b { color: var(--verde); }
.bm-faq dt { font-family: var(--display); text-transform: uppercase; font-size: 0.95rem;
             margin-top: 1.2rem; color: var(--amarillo); }
.bm-faq dd { margin: 0.4rem 0 0; color: var(--hueso-2); font-size: 0.92rem; max-width: 68ch; }
.bm-cta-final { border: var(--borde); background: var(--verde); color: var(--negro);
                padding: 2.5rem; margin-top: 2.5rem; text-align: center;
                box-shadow: var(--sombra); border-radius: var(--radio); }
.bm-cta-final h2 { font-family: var(--display); font-size: 2rem; margin-bottom: 1.2rem;
                   text-transform: uppercase; }
.bm-cta-final .bm-hero-botones { justify-content: center; }
.bm-cta-final .bm-btn-linea { color: var(--negro); border-color: var(--negro);
                              box-shadow: 4px 4px 0 var(--negro); }

/* ── Sponsors ────────────────────────────────────────────────────────────── */

.bm-paquetes { display: grid; gap: 1rem; margin-bottom: 2rem;
               grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bm-paquete { border: var(--borde-claro); background: var(--negro-2); padding: 1.3rem;
              cursor: pointer; border-radius: var(--radio);
              transition: transform .14s cubic-bezier(.2,.9,.3,1.2), box-shadow .14s ease; }
.bm-paquete:hover { transform: translate(-3px,-3px); box-shadow: var(--sombra-amarilla); }
.bm-paquete.es-elegido { border-color: var(--amarillo); box-shadow: var(--sombra-amarilla); }
.bm-paquete h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.bm-paquete p { font-size: 0.88rem; color: var(--hueso-2); margin: 0; }
.bm-paquete-precio { font-family: var(--mono); color: var(--verde); margin-top: 0.8rem !important; }
.bm-sponsors-logos { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bm-sponsor { border: 2px solid var(--hueso); padding: 0.8rem 1.2rem; font-weight: 700;
              border-radius: var(--radio-chico); }
.bm-sponsor img { max-height: 40px; width: auto; }
.bm-sponsor-form { max-width: 520px; }

/* ── Entrar ──────────────────────────────────────────────────────────────── */

.bm-entrar { display: grid; place-items: center; min-height: 60vh; }
.bm-entrar-caja { border: var(--borde-claro); background: var(--negro-2); padding: 2.2rem;
                  width: 100%; max-width: 420px; box-shadow: var(--sombra-amarilla);
                  border-radius: var(--radio); }
.bm-entrar-caja .bm-h1 { margin-bottom: 1rem; }
.bm-nota-puerta { margin-top: 1.5rem; border-top: 1px solid rgba(242,240,233,.15);
                  padding-top: 1rem; color: var(--gris); font-size: 0.82rem; }

/* ── Estados sueltos ─────────────────────────────────────────────────────── */

.bm-cargando { display: flex; align-items: center; gap: 0.8rem; padding: 3rem 0;
               color: var(--gris); font-family: var(--mono); font-size: 0.85rem; }
.bm-cargando-barra { width: 3rem; height: 0.5rem; background: var(--verde);
                     animation: bm-carga 1s infinite ease-in-out; }
@keyframes bm-carga { 0%,100% { transform: scaleX(.3); opacity:.4 }
                      50% { transform: scaleX(1); opacity:1 } }
.bm-vacio { border: 3px dashed var(--negro-3); padding: 3rem 1.5rem; text-align: center;
            border-radius: var(--radio); }
.bm-vacio h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.bm-vacio p { color: var(--gris); max-width: 46ch; margin: 0 auto 1.4rem; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.bm-footer { border-top: var(--borde-claro); background: var(--negro-2);
             padding: 3rem 1.2rem 1.5rem; }
.bm-footer-in { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 2rem;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bm-footer-col h4 { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--gris);
                    margin-bottom: 0.8rem; }
.bm-footer-col a { display: block; padding: 0.2rem 0; font-size: 0.9rem; }
.bm-footer-col a:hover { color: var(--verde); }
.bm-footer-marca { font-family: var(--display); font-size: 1.4rem; margin: 0 0 0.6rem;
                   color: var(--amarillo); }
.bm-footer-nota { color: var(--gris); font-size: 0.85rem; max-width: 34ch; }
.bm-footer-baja { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.2rem;
                  border-top: 1px solid rgba(242,240,233,.12); display: flex;
                  justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
                  font-size: 0.8rem; color: var(--gris); }
.bm-footer-baja a { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ── Móvil ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .bm-ficha-cabeza, .bm-fiesta-cabeza { grid-template-columns: 1fr; }
  .bm-ficha-foto, .bm-fiesta-flyer-grande { max-width: 300px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .bm-hamburguesa { display: block; }
  .bm-nav { position: fixed; inset: 62px 0 auto 0; background: var(--negro);
            border-bottom: var(--borde-claro); flex-direction: column; align-items: stretch;
            gap: 0; padding: 0.5rem 1.2rem 1.2rem; display: none; }
  .bm-nav.es-abierto { display: flex; }
  .bm-nav-a { padding: 0.75rem 0; border-bottom: 1px solid rgba(242,240,233,.12); }
  .bm-nav-solo-movil { display: block; }
  .bm-topbar-fin .bm-btn { display: none; }
  .bm-artista-fila, .bm-fiesta-fila, .bm-local-fila { grid-template-columns: 70px 1fr; }
  .bm-artista-tarifa { grid-column: 1 / -1; text-align: left; flex-direction: row;
                       gap: 0.5rem; align-items: baseline; }
  .bm-artista-fila .bm-artista-foto, .bm-fiesta-flyer, .bm-local-foto {
    width: 70px; height: 70px; }
  .bm-booking { grid-template-columns: 56px 1fr; }
  .bm-booking-plata, .bm-booking-acciones { grid-column: 1 / -1; }
  .bm-booking-plata { text-align: left; flex-direction: row; gap: 0.5rem;
                      align-items: baseline; }
  .bm-mapa-panel { max-width: none; margin: 0.7rem; }
  .bm-mapa-cabeza { margin: 0.7rem; }
  .bm-cal { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Movimiento
   ══════════════════════════════════════════════════════════════════════════
   Tres animaciones y ninguna más. Cada una tiene un trabajo:

     bm-entrar-arriba  lo que llega al cargar una vista — dice «esto es nuevo»
     bm-pop            lo que acaba de crearse — un código, una entrada, una
                       clave. Rebota un poco: es la confirmación de que pasó.
     bm-latido         lo que está vivo ahora mismo, en el mapa.

   Todo respeta `prefers-reduced-motion`: quien pidió que la pantalla no se
   mueva tiene sus razones, y esta app se usa de noche y a veces borracho. */

@keyframes bm-entrar-arriba {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}
@keyframes bm-entrar-abajo {
  from { opacity: 0; transform: translateY(-10px) }
  to   { opacity: 1; transform: none }
}
@keyframes bm-pop {
  0%   { opacity: 0; transform: scale(.9) }
  60%  { transform: scale(1.03) }
  100% { opacity: 1; transform: scale(1) }
}

/* La vista entera entra al navegar. La clave del router remonta el <main>, así
   que la animación se dispara sola en cada cambio de pantalla. */
.bm-vista { animation: bm-entrar-arriba .3s cubic-bezier(.2,.8,.3,1) both; }
.bm-panel-seccion { animation: bm-entrar-arriba .25s cubic-bezier(.2,.8,.3,1) both; }

/* Las rejillas entran escalonadas: la lista se «arma» en vez de aparecer de
   golpe, y el ojo sigue el orden en el que hay que leerla. Se cortan a los
   diez porque a partir de ahí el retraso se nota como lentitud. */
.bm-rejilla > *, .bm-lista-artistas > *, .bm-lista-fiestas > *,
.bm-tienda-rejilla > *, .bm-escritorio-rejilla > *, .bm-codigos > * {
  animation: bm-entrar-arriba .35s cubic-bezier(.2,.8,.3,1) both;
}
.bm-rejilla > :nth-child(1), .bm-lista-artistas > :nth-child(1),
.bm-tienda-rejilla > :nth-child(1), .bm-escritorio-rejilla > :nth-child(1) { animation-delay: .02s }
.bm-rejilla > :nth-child(2), .bm-lista-artistas > :nth-child(2),
.bm-tienda-rejilla > :nth-child(2), .bm-escritorio-rejilla > :nth-child(2) { animation-delay: .06s }
.bm-rejilla > :nth-child(3), .bm-lista-artistas > :nth-child(3),
.bm-tienda-rejilla > :nth-child(3), .bm-escritorio-rejilla > :nth-child(3) { animation-delay: .10s }
.bm-rejilla > :nth-child(4), .bm-lista-artistas > :nth-child(4),
.bm-tienda-rejilla > :nth-child(4), .bm-escritorio-rejilla > :nth-child(4) { animation-delay: .14s }
.bm-rejilla > :nth-child(5), .bm-lista-artistas > :nth-child(5),
.bm-tienda-rejilla > :nth-child(5), .bm-escritorio-rejilla > :nth-child(5) { animation-delay: .18s }
.bm-rejilla > :nth-child(n+6), .bm-lista-artistas > :nth-child(n+6),
.bm-tienda-rejilla > :nth-child(n+6), .bm-escritorio-rejilla > :nth-child(n+6) { animation-delay: .22s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── Escritorio ──────────────────────────────────────────────────────────── */

.bm-escritorio-saludo { display: flex; align-items: flex-start; justify-content: space-between;
                        gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bm-escritorio-que { color: var(--gris); margin: 0.3rem 0 0; }
.bm-escritorio-alerta { display: flex; align-items: center; gap: 0.7rem;
                        border: var(--borde); border-radius: var(--radio);
                        background: var(--amarillo); color: var(--negro);
                        padding: 0.7rem 1.1rem; box-shadow: var(--sombra);
                        font-weight: 700; font-size: 0.9rem;
                        animation: bm-pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
.bm-escritorio-alerta:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--negro); }
.bm-escritorio-alerta-n { font-family: var(--display); font-size: 1.6rem; line-height: 1; }

.bm-escritorio-proxima { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
                         border: var(--borde-claro); border-radius: var(--radio);
                         background: var(--negro-2); padding: 0.9rem 1.2rem;
                         margin-bottom: 2rem; font-size: 0.92rem; }
.bm-escritorio-proxima-label { font-size: 0.68rem; text-transform: uppercase;
                               letter-spacing: 0.14em; color: var(--gris); }
.bm-escritorio-proxima strong { font-family: var(--display); text-transform: uppercase; }
.bm-escritorio-proxima-plata { margin-left: auto; font-family: var(--mono);
                               color: var(--verde); }

.bm-escritorio-seccion { margin-bottom: 2.2rem; }
.bm-escritorio-titulo { font-family: var(--ui); font-size: 0.72rem; font-weight: 700;
                        text-transform: uppercase; letter-spacing: 0.18em;
                        color: var(--gris); margin-bottom: 0.9rem; }
.bm-escritorio-rejilla { display: grid; gap: 0.9rem;
                         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bm-tarjeta-accion { display: flex; align-items: flex-start; gap: 0.9rem;
                     border: var(--borde-claro); border-radius: var(--radio);
                     background: var(--negro-2); padding: 1.1rem;
                     transition: transform .14s cubic-bezier(.2,.9,.3,1.2),
                                 box-shadow .14s ease, background .15s ease; }
.bm-tarjeta-accion:hover { transform: translate(-3px,-3px); background: var(--negro-3);
                           box-shadow: 6px 6px 0 var(--hueso); }
.bm-tarjeta-accion h4 { font-size: 0.98rem; margin-bottom: 0.25rem; }
.bm-tarjeta-accion p { margin: 0; font-size: 0.83rem; color: var(--gris); line-height: 1.45; }
.bm-tarjeta-icono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
                    flex: none; border: 2px solid var(--negro); border-radius: 12px;
                    color: var(--negro); }
.bm-tarjeta-icono svg { width: 1.3rem; height: 1.3rem; color: var(--negro) !important; }
.bm-tarjeta-accion:hover .bm-tarjeta-icono { transform: rotate(-4deg) scale(1.06);
                                             transition: transform .18s cubic-bezier(.2,.9,.3,1.4); }

/* ── Formularios largos ──────────────────────────────────────────────────── */

.bm-form { max-width: 900px; }
.bm-form-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               gap: 1rem; }
.bm-form-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                gap: 1rem; }
.bm-form-linea { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.bm-form-linea .bm-input { flex: 1 1 200px; }
.bm-form-barra { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem;
                 padding-top: 1.2rem; border-top: 1px solid rgba(242,240,233,.12); }
.bm-campo-pista { display: block; font-size: 0.72rem; color: var(--gris);
                  margin-top: 0.3rem; font-family: var(--mono); }
.bm-input-dinero { display: flex; align-items: stretch; }
.bm-input-moneda { display: grid; place-items: center; padding: 0 0.7rem;
                   border: var(--borde-claro); border-right: 0;
                   border-radius: var(--radio-chico) 0 0 var(--radio-chico);
                   background: var(--negro-3); font-family: var(--mono);
                   font-size: 0.85rem; color: var(--gris); }
.bm-input-dinero .bm-input { border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.bm-btn-peligro { background: var(--rosa); color: #fff; border-color: var(--negro); }
.bm-enlace { color: var(--verde); border-bottom: 2px solid var(--verde); }
.bm-check-solo { display: inline-flex; margin: 0.5rem 0; }
.bm-check-cuerpo { display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
                   flex: 1; }
.bm-check-clave { background: transparent; border: 2px solid var(--gris); color: var(--gris);
                  width: 1.5rem; height: 1.5rem; border-radius: var(--radio-pill);
                  cursor: pointer; font-weight: 900; line-height: 1; flex: none; }
.bm-check-clave.es-activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }

.bm-setup-grupos { display: grid; gap: 1.2rem; }
.bm-setup-grupo { }
.bm-setup-categoria { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
                     letter-spacing: 0.16em; color: var(--amarillo); margin: 0 0 0.5rem; }

.bm-chips-elegir { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.bm-chip-elegir { border: 2px solid var(--negro-3); background: transparent;
                  color: var(--hueso); border-radius: var(--radio-pill);
                  padding: 0.35rem 0.8rem; font-family: var(--ui); font-weight: 600;
                  font-size: 0.82rem; cursor: pointer;
                  transition: transform .12s cubic-bezier(.2,.9,.3,1.3),
                              background .12s ease, border-color .12s ease; }
.bm-chip-elegir:hover { border-color: var(--hueso); transform: translateY(-2px); }
.bm-chip-elegir.es-activo { font-weight: 700; }

.bm-colores { display: flex; gap: 0.3rem; }
.bm-color { width: 1.4rem; height: 1.4rem; border: 2px solid var(--negro-3);
            border-radius: var(--radio-pill); cursor: pointer; padding: 0; }
.bm-color.es-activo { border-color: var(--hueso); transform: scale(1.15); }

/* ── Listas editables ────────────────────────────────────────────────────── */

.bm-lista-editable { display: flex; flex-direction: column; gap: 0.45rem; margin: 1rem 0; }
.bm-lista-fila { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
                 border: 2px solid var(--negro-3); border-radius: var(--radio-chico);
                 background: var(--negro-2); padding: 0.6rem 0.9rem; }
.bm-lista-fila.es-editando { border-color: var(--amarillo); }
.bm-lista-detalle { color: var(--gris); font-size: 0.82rem; }
.bm-lista-acciones { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
.bm-icono-btn { background: transparent; border: 2px solid var(--negro-3); color: var(--gris);
                width: 2rem; height: 2rem; border-radius: var(--radio-pill); cursor: pointer;
                display: grid; place-items: center;
                transition: transform .12s cubic-bezier(.2,.9,.3,1.4), color .12s ease,
                            border-color .12s ease; }
.bm-icono-btn:hover { color: var(--amarillo); border-color: var(--amarillo);
                      transform: scale(1.12) rotate(-6deg); }
.bm-icono-btn.es-peligro:hover { color: var(--rosa); border-color: var(--rosa); }
.bm-genero-chip { border: 2px solid var(--negro); border-radius: var(--radio-pill);
                  padding: 0.2rem 0.8rem; color: var(--negro); font-weight: 700;
                  font-size: 0.85rem; }

/* ── Cuentas ─────────────────────────────────────────────────────────────── */

.bm-cuentas { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.bm-cuenta { display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem;
             align-items: center; border: var(--borde-claro); border-radius: var(--radio);
             background: var(--negro-2); padding: 0.8rem 1rem; }
.bm-cuenta-quien { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.bm-cuenta-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
                    flex: none; border: 2px solid var(--negro); border-radius: var(--radio-pill);
                    color: var(--negro); font-family: var(--display); font-size: 1.1rem; }
.bm-cuenta .bm-input-chico { width: auto; }
.bm-pastilla-btn { border: 2px solid var(--gris); background: transparent; color: var(--gris);
                   border-radius: var(--radio-pill); padding: 0.15rem 0.7rem; cursor: pointer;
                   font-family: var(--ui); font-size: 0.7rem; font-weight: 700;
                   text-transform: uppercase; letter-spacing: 0.06em; }
.bm-pastilla-btn.es-activo { border-color: var(--verde); color: var(--verde); }
.bm-pastilla-btn.es-baja { opacity: .6; }

/* ── Códigos ─────────────────────────────────────────────────────────────── */

.bm-codigo.es-apagado { opacity: .45; }
.bm-codigo-cabeza { display: flex; align-items: center; justify-content: space-between;
                    gap: 0.5rem; }
.bm-codigo-cabeza .bm-icono-btn { border-color: rgba(11,11,12,.35); color: rgba(11,11,12,.7); }
.bm-codigo-quien { display: flex; align-items: center; gap: 0.7rem; margin: 0.8rem 0;
                   padding: 0.7rem 0; border-top: 2px solid rgba(11,11,12,.2);
                   border-bottom: 2px solid rgba(11,11,12,.2); }
.bm-codigo-foto { width: 2.6rem; height: 2.6rem; border-radius: var(--radio-pill);
                  object-fit: cover; border: 2px solid var(--negro); }
.bm-codigo-ig { display: flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0 0;
                font-size: 0.8rem; }
.bm-codigo-quien .bm-lista-detalle { color: rgba(11,11,12,.6); }
.bm-codigo-trato { margin: 0 0 0.8rem; font-size: 0.85rem; }
.bm-codigo-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
                    border-top: 2px solid rgba(11,11,12,.2); padding-top: 0.7rem; }
.bm-codigo-cifras span { display: block; font-size: 0.62rem; text-transform: uppercase;
                         letter-spacing: 0.1em; color: rgba(11,11,12,.6); }
.bm-codigo-cifras b { font-family: var(--mono); font-size: 1rem; }
.bm-codigo-cifras .es-verde b { color: var(--verde-2); }
.bm-codigo-ejemplo { border: 2px dashed rgba(242,240,233,.25); border-radius: var(--radio-chico);
                     padding: 0.9rem; margin: 1rem 0; font-size: 0.85rem; }
.bm-codigo-ejemplo ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bm-codigo-ejemplo li { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.bm-codigo-ejemplo b { font-family: var(--mono); }
.bm-codigo-ejemplo .es-verde { color: var(--verde); }

/* ── Marca ───────────────────────────────────────────────────────────────── */

.bm-marca { display: flex; align-items: center; gap: 0.6rem; }
.bm-marca-simbolo { width: 2rem; height: 2rem; flex: none; }
.bm-marca-texto { display: inline-flex; }
.bm-footer-logo { width: 190px; height: auto; margin-bottom: 0.8rem; }
@media (max-width: 720px) {
  /* En la barra de móvil manda el símbolo: la palabra se lee en el pie y en la
     pestaña del navegador, y aquí lo que hace falta es sitio. */
  .bm-marca-texto { display: none; }
  .bm-marca-simbolo { width: 2.2rem; height: 2.2rem; }
}

/* ── La entrada ──────────────────────────────────────────────────────────── */
/* Un ticket de verdad: mordida a los lados, línea de corte y el código abajo
   como si fuera el talón. Los colores los pone el diseño de cada fiesta, así
   que aquí solo va la forma. */

.bm-entrada { position: relative; width: 100%; max-width: 380px; border: 3px solid;
              padding: 1.4rem 1.4rem 1.2rem; overflow: hidden;
              font-family: var(--ui); box-shadow: var(--sombra); }
/* La mordida del troquel. Va sobre la línea de rasgar y del color del fondo de
   la página: tiene que leerse como un agujero, no como un lunar. El `overflow`
   del ticket se come la mitad de fuera, que es justo lo que deja media luna. */
.bm-entrada-muesca { position: absolute; width: 30px; height: 30px; border-radius: 50%;
                     background: var(--negro-2); top: 50%; transform: translateY(-50%); }
.bm-entrada-muesca.es-izq { left: -15px; }
.bm-entrada-muesca.es-der { right: -15px; }
.bm-entrada-cabeza { display: flex; align-items: center; gap: 0.5rem;
                     margin-bottom: 1rem; }
.bm-entrada-logo { width: 1.6rem; height: 1.6rem; }
.bm-entrada-marca { font-family: var(--display); font-size: 0.78rem;
                    letter-spacing: 0.06em; text-transform: uppercase; }
.bm-entrada-tipo { margin-left: auto; font-family: var(--mono); font-size: 0.6rem;
                   font-weight: 700; letter-spacing: 0.16em; padding: 0.2rem 0.5rem;
                   border-radius: var(--radio-pill); }
.bm-entrada-flyer { margin-bottom: 0.9rem; border-radius: var(--radio-chico);
                    overflow: hidden; aspect-ratio: 16/9; }
.bm-entrada-flyer img { width: 100%; height: 100%; object-fit: cover; }
.bm-entrada-fecha { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
                    margin: 0 0 0.3rem; }
.bm-entrada-titulo { font-family: var(--display); font-size: 1.5rem; line-height: 1;
                     text-transform: uppercase; margin: 0 0 0.4rem; }
.bm-entrada-lugar { font-size: 0.82rem; opacity: .85; margin: 0; }
.bm-entrada-lineup { font-size: 0.75rem; opacity: .7; margin: 0.5rem 0 0; }
/* La línea de rasgar. El punteado va en un `::before` y no en el borde del
   propio div porque el div ahora lleva las muescas dentro, y una `opacity` en
   el padre se las lleva por delante: se veían dos lunares translúcidos. */
.bm-entrada-corte { position: relative; height: 3px; margin: 1.1rem -1.4rem; }
.bm-entrada-corte::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
                            border-top: 3px dashed; border-color: inherit; opacity: .5; }
.bm-entrada-pie { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bm-entrada-etiqueta { display: block; font-family: var(--mono); font-size: 0.58rem;
                       letter-spacing: 0.12em; text-transform: uppercase; opacity: .6; }
.bm-entrada-pie b { font-size: 0.95rem; }
.bm-entrada-codigo { font-family: var(--mono); font-size: 1.25rem; font-weight: 700;
                     letter-spacing: 0.18em; text-align: center; padding: 0.6rem;
                     border-radius: var(--radio-chico); }
.bm-entrada-nota { font-size: 0.65rem; opacity: .6; margin: 0.7rem 0 0; text-align: center; }

/* ── El diseñador ────────────────────────────────────────────────────────── */

.bm-disenador-dos { display: grid; grid-template-columns: 1fr 400px; gap: 2rem;
                    align-items: start; margin-top: 1.5rem; }
.bm-disenador-titulo { font-family: var(--ui); font-size: 0.68rem; font-weight: 700;
                       text-transform: uppercase; letter-spacing: 0.16em;
                       color: var(--gris); margin: 1.4rem 0 0.6rem; }
.bm-disenador-titulo:first-child { margin-top: 0; }
.bm-disenador-vista { position: sticky; top: 90px; }
.bm-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
              gap: 0.5rem; }
.bm-paleta { display: flex; flex-wrap: wrap; gap: 3px; padding: 0.5rem;
             border: 2px solid var(--negro-3); border-radius: var(--radio-chico);
             background: transparent; cursor: pointer;
             transition: transform .12s cubic-bezier(.2,.9,.3,1.3), border-color .12s ease; }
.bm-paleta:hover { transform: translateY(-2px); border-color: var(--hueso); }
.bm-paleta.es-activo { border-color: var(--verde); }
.bm-paleta span { width: 100%; height: 12px; border-radius: 3px; }
.bm-paleta span:not(:first-child) { width: calc(50% - 1.5px); }
.bm-paleta i { flex-basis: 100%; font-style: normal; font-size: 0.65rem;
               color: var(--gris); text-align: center; margin-top: 0.2rem; }
.bm-color-input { width: 100%; height: 2.6rem; border: var(--borde-claro);
                  border-radius: var(--radio-chico); background: var(--negro);
                  padding: 3px; cursor: pointer; }
.bm-disenador-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 900px) {
  .bm-disenador-dos { grid-template-columns: 1fr; }
  .bm-disenador-vista { position: static; }
}

/* ── Valoraciones ────────────────────────────────────────────────────────── */

.bm-notas { display: grid; gap: 0.8rem;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bm-nota-caja { border: 2px solid var(--negro-3); border-radius: var(--radio);
                padding: 0.9rem 1rem; }
.bm-nota-valor { font-family: var(--display); font-size: 1.9rem; line-height: 1;
                 color: var(--verde); }
.bm-nota-de { font-size: 0.7rem; color: var(--gris); }
.bm-nota-que { display: block; font-size: 0.72rem; text-transform: uppercase;
               letter-spacing: 0.1em; color: var(--gris); margin-top: 0.35rem; }
.bm-nota-pregunta { display: block; font-size: 0.72rem; color: var(--gris);
                    margin-top: 0.15rem; }
.bm-barra-nota { height: 6px; background: var(--negro-3); border-radius: var(--radio-pill);
                 margin-top: 0.5rem; overflow: hidden; }
.bm-barra-nota i { display: block; height: 100%; background: var(--verde); }
.bm-general { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
              margin-bottom: 1rem; }
.bm-general-nota { font-family: var(--display); font-size: 3rem; line-height: 1;
                   color: var(--amarillo); }
.bm-estrellas { color: var(--amarillo); letter-spacing: 2px; font-size: 1.1rem; }
.bm-comentario { border-left: 3px solid var(--negro-3); padding: 0.2rem 0 0.2rem 0.9rem;
                 margin: 0.9rem 0; }
.bm-comentario-quien { font-size: 0.75rem; color: var(--gris); margin: 0.3rem 0 0; }
.bm-estrella-btn { background: transparent; border: 0; cursor: pointer; font-size: 1.6rem;
                   color: var(--negro-3); padding: 0 0.1rem; line-height: 1;
                   transition: transform .12s cubic-bezier(.2,.9,.3,1.4), color .12s ease; }
.bm-estrella-btn:hover { transform: scale(1.2); }
.bm-estrella-btn.es-activa { color: var(--amarillo); }

/* ── Redes del artista ───────────────────────────────────────────────────── */

.bm-redes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.bm-red { display: flex; align-items: center; gap: 0.4rem; border: 2px solid var(--negro-3);
          border-radius: var(--radio-pill); padding: 0.3rem 0.8rem; font-size: 0.82rem;
          transition: border-color .12s ease, transform .12s ease; }
.bm-red:hover { border-color: var(--amarillo); transform: translateY(-2px); }
.bm-red b { font-family: var(--mono); }
.bm-alcance { border: 2px solid var(--verde); border-radius: var(--radio);
              padding: 0.8rem 1rem; display: flex; align-items: baseline; gap: 0.6rem;
              flex-wrap: wrap; }
.bm-alcance-n { font-family: var(--display); font-size: 1.6rem; color: var(--verde); }

/* ── Tienda ──────────────────────────────────────────────────────────────── */

.bm-tienda-cabeza { margin-bottom: 1.5rem; }
.bm-tienda-seccion { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase;
                     letter-spacing: -0.01em; margin: 2.5rem 0 1.1rem; }
.bm-tienda-rejilla { display: grid; gap: 1.2rem;
                     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Cada tarjeta lleva su color en `--acento` (lo pone el componente): es lo que
   convierte una pared negra en un escaparate sin salirse de la paleta. */
.bm-tienda-tarjeta { display: flex; flex-direction: column; border: var(--borde-claro);
                     border-radius: var(--radio); overflow: hidden; background: var(--negro-2);
                     transition: transform .16s cubic-bezier(.2,.9,.3,1.2),
                                 box-shadow .16s ease, border-color .16s ease; }
.bm-tienda-tarjeta:hover { transform: translate(-4px,-4px); border-color: var(--acento);
                           box-shadow: 8px 8px 0 var(--acento); }
.bm-tienda-flyer { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.bm-tienda-flyer img { width: 100%; height: 100%; object-fit: cover;
                       transition: transform .4s ease; }
.bm-tienda-tarjeta:hover .bm-tienda-flyer img { transform: scale(1.06); }
.bm-tienda-fecha { position: absolute; left: 0.7rem; bottom: 0.7rem;
                   background: var(--acento); color: var(--negro);
                   font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
                   text-transform: uppercase; letter-spacing: 0.1em;
                   padding: 0.25rem 0.6rem; border-radius: var(--radio-pill); }
.bm-tienda-cuerpo { padding: 1rem; flex: 1; }
.bm-tienda-cuerpo h3 { font-size: 1.05rem; line-height: 1.1; }
.bm-tienda-lugar, .bm-tienda-generos { display: flex; align-items: center; gap: 0.3rem;
                                       font-size: 0.82rem; color: var(--gris);
                                       margin: 0.45rem 0 0; }
.bm-tienda-pie { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem;
                 border-top: 2px solid var(--negro-3); font-size: 0.82rem; }
.bm-tienda-pie strong { font-family: var(--mono); color: var(--acento); }
.bm-tienda-sin { color: var(--gris); }
.bm-tienda-cta { margin-left: auto; display: flex; align-items: center; gap: 0.3rem;
                 font-weight: 700; text-transform: uppercase; font-size: 0.75rem;
                 letter-spacing: 0.06em; color: var(--acento); }
.bm-tienda-tarjeta:hover .bm-tienda-cta { gap: 0.6rem; transition: gap .16s ease; }

/* Filas — el formato de «elegir», no el de «mirar». */
.bm-filas-eventos { display: flex; flex-direction: column; gap: 0.6rem; }
.bm-fila-evento { display: grid; grid-template-columns: 86px 1fr auto; gap: 1.2rem;
                  align-items: center; border: var(--borde-claro);
                  border-radius: var(--radio); background: var(--negro-2);
                  padding: 0.8rem 1.1rem;
                  transition: background .15s ease, border-color .15s ease,
                              transform .14s cubic-bezier(.2,.9,.3,1.2); }
.bm-fila-evento:hover { background: var(--negro-3); border-color: var(--amarillo);
                        transform: translateX(4px); }
.bm-fila-fecha { display: grid; place-items: center; border-right: 2px solid var(--negro-3);
                 padding-right: 1rem; }
.bm-fila-mes { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
               color: var(--rosa); }
.bm-fila-dia { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.bm-fila-semana { font-family: var(--mono); font-size: 0.62rem; color: var(--gris);
                  text-transform: uppercase; }
.bm-fila-datos h3 { font-size: 1.1rem; }
.bm-fila-lugar { font-size: 0.85rem; color: var(--gris); margin: 0.25rem 0 0; }
.bm-fila-generos { font-size: 0.75rem; color: var(--verde); margin: 0.2rem 0 0; }
.bm-fila-accion { display: flex; align-items: center; gap: 1rem; }
.bm-fila-precio { font-size: 0.8rem; color: var(--gris); white-space: nowrap; }
.bm-fila-precio b { font-family: var(--mono); color: var(--hueso); }

.bm-tienda-ficha-dos { display: grid; grid-template-columns: 380px 1fr; gap: 2.5rem;
                       align-items: start; }
.bm-tienda-ficha-flyer { border: var(--borde-claro); border-radius: var(--radio);
                         overflow: hidden; aspect-ratio: 4/5;
                         box-shadow: var(--sombra-amarilla); }
.bm-tienda-ficha-flyer img { width: 100%; height: 100%; object-fit: cover; }
.bm-tienda-lineup { margin-top: 1.2rem; }
.bm-tienda-lineup h4 { font-family: var(--ui); font-size: 0.68rem; text-transform: uppercase;
                       letter-spacing: 0.16em; color: var(--gris); margin-bottom: 0.5rem; }
.bm-tienda-artista { display: flex; gap: 0.7rem; padding: 0.45rem 0;
                     border-bottom: 1px solid rgba(242,240,233,.1); }
.bm-tienda-artista:hover { color: var(--verde); }
.bm-tienda-fecha-grande { font-family: var(--mono); font-size: 0.82rem; color: var(--verde);
                          text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.4rem; }

@media (max-width: 780px) {
  .bm-tienda-ficha-dos { grid-template-columns: 1fr; }
  .bm-fila-evento { grid-template-columns: 66px 1fr; }
  .bm-fila-accion { grid-column: 1 / -1; justify-content: space-between; }
}

/* El acento de cada tarjeta de la tienda. Seis clases y no un `style` en línea:
   Reagent camelliza las claves de :style y una variable CSS no sobrevive. */
.bm-tienda-tarjeta.es-acento-1 { --acento: #2BF07E; }
.bm-tienda-tarjeta.es-acento-2 { --acento: #F5DF4D; }
.bm-tienda-tarjeta.es-acento-3 { --acento: #FF2E63; }
.bm-tienda-tarjeta.es-acento-4 { --acento: #8B5CF6; }
.bm-tienda-tarjeta.es-acento-5 { --acento: #00D4FF; }
.bm-tienda-tarjeta.es-acento-6 { --acento: #FF7A00; }

/* ── El talón de concierto ───────────────────────────────────────────────── */
/* El formato clásico: 8.5 × 2.75 pulgadas, la proporción de una entrada de
   verdad. Tres columnas —lo que vas a ver, la foto y el talón perforado— y la
   perforación con sus dos muescas, que es el detalle que lo vuelve reconocible
   incluso en miniatura. */

/* El talón es una sola pieza que se mira a cualquier tamaño: en el diseñador
   cabe en media pantalla, en el móvil ocupa el ancho entero y al exportarlo a
   PNG se pide más grande. Por eso todo lo de dentro se mide en `cqw` —tanto
   por ciento del ancho del propio talón— y no en `rem`: con `rem` las letras
   se quedaban del mismo tamaño mientras la caja encogía, y el título, la fecha
   y los chips se salían por abajo. Cambiar el ancho ahora escala la pieza
   entera, como una foto. */
.bm-talon { position: relative; display: grid; container-type: inline-size;
            grid-template-columns: 1.15fr 1fr 2px 21%;
            aspect-ratio: 8.5 / 2.75; width: 100%; max-width: 620px;
            border: 3px solid; overflow: hidden; font-family: var(--ui);
            box-shadow: var(--sombra); }
.bm-talon.es-sin-foto { grid-template-columns: 1fr 2px 21%; }
.bm-talon-info { padding: 2.3cqw 2.6cqw; display: flex; flex-direction: column;
                 justify-content: center; gap: 0.9cqw; min-width: 0; }
.bm-talon-kicker { font-family: var(--mono); font-size: 1.34cqw; letter-spacing: 0.2em;
                   opacity: .7; margin: 0; }
.bm-talon-titulo { font-family: var(--display); font-size: 3.48cqw; line-height: 0.95;
                   text-transform: uppercase; margin: 0; overflow: hidden;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bm-talon-lineup { font-size: 1.6cqw; opacity: .75; margin: 0; overflow: hidden;
                   white-space: nowrap; text-overflow: ellipsis; }
.bm-talon-fecha { align-self: flex-start; font-family: var(--mono); font-size: 1.6cqw;
                  font-weight: 700; letter-spacing: 0.08em; padding: 0.65cqw 1.55cqw;
                  border-radius: 1cqw; }
.bm-talon-chips { display: flex; flex-wrap: wrap; gap: 0.77cqw; }
.bm-talon-chip { border: 1.5px solid; border-radius: 0.8cqw; padding: 0.31cqw 1.03cqw;
                 font-size: 1.42cqw; text-transform: uppercase; letter-spacing: 0.06em;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                 max-width: 100%; }
.bm-talon-foto { overflow: hidden; }
.bm-talon-foto img { width: 100%; height: 100%; object-fit: cover; }

/* La perforación. Las muescas van del color del fondo de la página para que
   parezcan agujeros y no puntos pintados. */
.bm-talon-corte { position: relative; border-left: 2px dashed; opacity: .9; }
/* En `cqw` como todo lo demás del talón: una muesca de píxeles fijos se ve
   como un bocado en la pieza pequeña y como una pulga en la grande. */
.bm-talon-muesca { position: absolute; left: -1.45cqw; width: 2.9cqw; height: 2.9cqw;
                   border-radius: 50%; background: var(--negro-2); }
.bm-talon-muesca.es-arriba { top: -1.45cqw; }
.bm-talon-muesca.es-abajo { bottom: -1.45cqw; }

/* `min-height: 0` y `overflow: hidden`: el resguardo es una columna de una
   rejilla y, sin esto, un hijo más alto que la fila —el texto del canto— la
   estira en vez de recortarse, y se lleva el talón por delante. */
.bm-talon-stub { display: flex; align-items: center; gap: 1.03cqw; padding: 1.55cqw 1.29cqw;
                 min-height: 0; overflow: hidden; }
.bm-talon-vertical { writing-mode: vertical-rl; transform: rotate(180deg);
                     font-family: var(--mono); font-size: 1.19cqw; letter-spacing: 0.16em;
                     opacity: .6; white-space: nowrap; max-height: 100%; overflow: hidden; }
.bm-talon-barras { display: flex; align-items: stretch; gap: 0.17cqw; align-self: stretch;
                   min-height: 0; flex: none; }
.bm-talon-barras span { display: block; background: currentColor; }
.bm-talon-celdas { display: flex; flex-direction: column; justify-content: center;
                   gap: 1.03cqw; min-width: 0; flex: 1; }
.bm-talon-celdas span { display: block; font-family: var(--mono); font-size: 1.08cqw;
                        letter-spacing: 0.12em; opacity: .6; }
.bm-talon-celdas b { font-size: 1.86cqw; }
.bm-talon-codigo { font-family: var(--mono); font-size: 1.5cqw; letter-spacing: 0.04em;
                   overflow-wrap: anywhere; }

/* Selector de formato en el diseñador */
.bm-formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bm-formato { display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
              border: 2px solid var(--negro-3); border-radius: var(--radio-chico);
              background: transparent; color: var(--gris); padding: 0.7rem 0.5rem;
              cursor: pointer; font-family: var(--ui); font-size: 0.72rem;
              text-align: center; line-height: 1.25;
              transition: border-color .12s ease, color .12s ease, transform .12s ease; }
.bm-formato:hover { transform: translateY(-2px); border-color: var(--hueso); }
.bm-formato.es-activo { border-color: var(--verde); color: var(--hueso); }
.bm-formato-muestra { display: block; border: 2px solid currentColor; border-radius: 4px; }
.bm-formato-muestra.es-talon { width: 62px; height: 20px; }
.bm-formato-muestra.es-tarjeta { width: 26px; height: 40px; }

/* ── Menú propio ─────────────────────────────────────────────────────────── */
/* Sustituye al <select> del sistema, que se pinta blanco y con la tipografía
   del OS en medio de una pantalla negra. */

.bm-menu { position: relative; }
.bm-menu-boton { width: 100%; display: flex; align-items: center; gap: 0.6rem;
                 background: var(--negro); color: var(--hueso); border: var(--borde-claro);
                 border-radius: var(--radio-chico); padding: 0.7rem 0.85rem;
                 font-family: var(--ui); font-size: 1rem; cursor: pointer;
                 text-align: left; transition: border-color .12s ease; }
.bm-menu-boton:hover { border-color: var(--verde); }
.bm-menu.es-abierto .bm-menu-boton { border-color: var(--verde);
                                     box-shadow: 4px 4px 0 var(--verde); }
.bm-menu-valor { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-menu-valor.es-vacio { color: var(--gris); }
.bm-menu-flecha { display: flex; color: var(--gris); transform: rotate(90deg);
                  transition: transform .16s ease; }
.bm-menu.es-abierto .bm-menu-flecha { transform: rotate(-90deg); color: var(--verde); }
.bm-menu-lista { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 800;
                 background: var(--negro-2); border: var(--borde-claro);
                 border-radius: var(--radio-chico); box-shadow: var(--sombra);
                 max-height: 320px; overflow-y: auto; padding: 0.3rem;
                 animation: bm-entrar-abajo .16s ease both; }
.bm-menu-opcion { width: 100%; display: block; text-align: left; background: transparent;
                  border: 0; border-radius: 8px; padding: 0.6rem 0.7rem; cursor: pointer;
                  color: var(--hueso); font-family: var(--ui); }
.bm-menu-opcion:hover { background: var(--negro-3); }
.bm-menu-opcion.es-actual { background: var(--verde); color: var(--negro); }
.bm-menu-opcion-label { display: block; font-weight: 600; font-size: 0.92rem; }
.bm-menu-opcion-detalle { display: block; font-size: 0.75rem; color: var(--gris);
                          margin-top: 0.1rem; }
.bm-menu-opcion.es-actual .bm-menu-opcion-detalle { color: rgba(11,11,12,.7); }
.bm-menu-vacio { color: var(--gris); font-size: 0.85rem; padding: 0.6rem 0.7rem; margin: 0; }

/* ── Filtro de fechas ────────────────────────────────────────────────────── */

.bm-filtro-fechas { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
                    margin-bottom: 1.4rem; }
.bm-filtro-fechas .bm-input { width: auto; padding: 0.45rem 0.6rem; font-size: 0.85rem; }
.bm-filtro-sep { color: var(--gris); font-size: 0.8rem; }
.bm-marcador-logo { width: 1.15rem; height: 1.15rem; flex: none; display: block; }
.bm-tipo-zona { align-self: flex-start; color: var(--negro); font-family: var(--mono);
                font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em;
                text-transform: uppercase; padding: 0.12rem 0.45rem;
                border-radius: var(--radio-pill); margin-bottom: 0.3rem; }

/* ── Cobro por transferencia ─────────────────────────────────────────────── */
/* Aquí no hay pasarela: se transfiere y se manda la captura. La pantalla lo
   trata como el proceso que es —datos, concepto, aviso— en vez de disimularlo. */

.bm-pago { border: var(--borde-claro); border-radius: var(--radio);
           background: var(--negro-2); padding: 1.3rem; margin-top: 1rem; }
.bm-pago h4 { font-family: var(--display); font-size: 1rem; text-transform: uppercase;
              display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; }
.bm-pago-datos { list-style: none; margin: 0 0 1rem; padding: 0; }
.bm-pago-datos li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
                    border-bottom: 1px solid rgba(242,240,233,.1); font-size: 0.9rem; }
.bm-pago-datos li span { color: var(--gris); font-size: 0.75rem; text-transform: uppercase;
                         letter-spacing: 0.1em; min-width: 7.5rem; }
.bm-pago-datos li b { font-size: 1rem; }
/* El concepto en amarillo: es el dato que todo el mundo se salta, y sin él una
   transferencia recibida no se puede casar con ninguna entrada. */
.bm-pago-datos li.es-clave { border: 2px solid var(--amarillo); border-radius: var(--radio-chico);
                             padding: 0.6rem 0.7rem; margin: 0.4rem 0; }
.bm-pago-datos li.es-clave b { color: var(--amarillo); letter-spacing: 0.1em; }
.bm-pago-avisar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.bm-pago-avisar .bm-input { flex: 1 1 240px; }
.bm-pago-avisado { color: var(--verde); font-weight: 700; margin: 0.8rem 0 0; }

.bm-cuentas-cobro { display: grid; gap: 0.8rem; margin: 1.2rem 0;
                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.bm-cuenta-cobro { display: flex; align-items: flex-start; justify-content: space-between;
                   gap: 0.8rem; border: var(--borde-claro); border-radius: var(--radio);
                   background: var(--negro-2); padding: 1.1rem; }
.bm-cuenta-cobro h4 { font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.bm-cuenta-tipo { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
                  border: 1.5px solid var(--gris); border-radius: var(--radio-pill);
                  padding: 0.1rem 0.45rem; color: var(--gris); text-transform: uppercase; }
.bm-cuenta-numero { font-family: var(--mono); font-size: 1.15rem; color: var(--verde);
                    margin: 0.5rem 0 0.3rem; letter-spacing: 0.04em; }
.bm-cuenta-cobro .bm-lista-detalle { display: flex; align-items: center; gap: 0.3rem;
                                     margin: 0.15rem 0 0; }