/* ============================================================================
   FBF Boletería — Caja, atención e inteligencia comercial
   ----------------------------------------------------------------------------
   MOBILE FIRST, y no por moda: la caja de taquilla se opera de pie, en la
   puerta del estadio, con una mano y con prisa. El escritorio es el caso
   secundario. Por eso los objetivos táctiles son de 46px, los campos no bajan
   de 16px (menos que eso hace que iOS aplique zoom automático al enfocar y
   descoloque el formulario) y la acción principal ocupa el ancho completo.

   Funciona en las DOS superficies, y las dos son de tema CLARO en su área de
   contenido:
     .club-portal-body     → portal del club (html{color-scheme:light},
                             --cp-bg:#edf4f0). Solo su barra lateral es oscura.
     .admin-workspace-body → panel FBF
   Por eso NO hay override de tema por superficie: una sola rampa clara sirve
   a las dos. Suponer lo contrario dejó los indicadores ilegibles una vez.
   ============================================================================ */

#boleteria-pro {
  --bp-ink: #0b2b20;
  --bp-ink-2: #3a5548;
  --bp-ink-3: #556d61;
  --bp-surface: #fff;
  --bp-line: rgba(6, 44, 31, .10);
  --bp-soft: #f2faf6;
  --bp-green: #0e7d52;
  --bp-green-bright: #14a067;
  --bp-gold: #f2b705;
  --bp-danger: #c62d38;
  --bp-r: var(--ad-r-md, 18px);
  --bp-r-sm: var(--ad-r-sm, 14px);
  --bp-shadow: var(--ad-e2, 0 2px 4px rgba(6,44,31,.07), 0 10px 24px rgba(6,44,31,.07));
  display: block;
  margin-top: 18px;
}

/* AMBAS las superficies son de tema CLARO en su área de contenido.
   El portal del club declara html{color-scheme:light} y --cp-bg:#edf4f0; solo
   su barra lateral es oscura. Una versión anterior de este archivo aplicaba
   aquí una rampa oscura por suponer lo contrario, y el resultado fue texto
   casi blanco sobre fondo claro: los indicadores quedaban ilegibles.
   No hay override de tema: la rampa clara de arriba sirve a las dos. */

#boleteria-pro .bp-root { display: grid; gap: 14px; }

#boleteria-pro .bp-eyebrow {
  display: block;
  /* --bp-green-bright (#14a067) sobre blanco mide 3.40:1 y reprueba AA.
     El verde oscuro de la rampa mide 5.13:1. */
  color: var(--bp-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#boleteria-pro h3, #boleteria-pro h4 {
  margin: 3px 0 0;
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  letter-spacing: -.035em;
}
#boleteria-pro h3 { font-size: 19px; }
#boleteria-pro h4 { font-size: 15px; }

#boleteria-pro .bp-help,
#boleteria-pro .bp-empty {
  margin: 0;
  color: var(--bp-ink-3);
  font-size: 11.5px;
  line-height: 1.55;
}
#boleteria-pro .bp-empty {
  padding: 22px;
  border: 1px dashed var(--bp-line);
  border-radius: var(--bp-r-sm);
  text-align: center;
}

/* ---------- Encabezado con selector de evento ---------- */
#boleteria-pro .bp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
#boleteria-pro .bp-head select {
  flex: 1 1 240px;
  min-height: 46px;
  max-width: 420px;
  padding: 0 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  background: var(--bp-surface);
  color: var(--bp-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Aviso ---------- */
#boleteria-pro .bp-flash {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--bp-r-sm);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
/* Sobre fondo claro el verde y el rojo tienen que ser los tonos oscuros de la
   rampa: los claros (#3cdb98, #ff8b93) sirven sobre oscuro y aquí desaparecen. */
#boleteria-pro .bp-flash.is-ok { background: rgba(20, 160, 103, .12); color: var(--bp-green); }
#boleteria-pro .bp-flash.is-error { background: rgba(198, 45, 56, .10); color: var(--bp-danger); }

/* ---------- Paneles ---------- */
#boleteria-pro .bp-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}
#boleteria-pro .bp-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

#boleteria-pro .bp-chip {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 160, 103, .13);
  color: var(--bp-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---------- Formularios ---------- */
#boleteria-pro .bp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#boleteria-pro .bp-field { display: grid; gap: 5px; min-width: 0; }
#boleteria-pro .bp-col-2 { grid-column: span 2; }
#boleteria-pro .bp-col-full { grid-column: 1 / -1; }

#boleteria-pro label {
  color: var(--bp-ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#boleteria-pro input,
#boleteria-pro select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  background: var(--bp-soft);
  color: var(--bp-ink);
  font: inherit;
  /* 16px exactos: por debajo de eso iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#boleteria-pro input:focus,
#boleteria-pro select:focus {
  outline: none;
  border-color: var(--bp-green-bright);
  box-shadow: 0 0 0 4px rgba(20, 160, 103, .14);
}

#boleteria-pro .bp-btn {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.35,.48,1), filter .2s ease, box-shadow .2s ease;
}
#boleteria-pro .bp-btn-primary {
  background: linear-gradient(135deg, var(--bp-green), var(--bp-green-bright));
  color: #fff;
  box-shadow: var(--bp-shadow), inset 0 1px 0 rgba(255, 255, 255, .26);
}
#boleteria-pro .bp-btn-primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
#boleteria-pro .bp-btn-primary:active { transform: scale(.98); }
#boleteria-pro .bp-btn-ghost {
  border-color: var(--bp-line);
  background: var(--bp-soft);
  color: var(--bp-ink);
}
#boleteria-pro .bp-btn-ghost:hover { border-color: var(--bp-green-bright); }
#boleteria-pro .bp-btn:disabled { opacity: .55; cursor: wait; transform: none; }

/* ---------- Turno de caja ---------- */
#boleteria-pro .bp-session {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 160, 103, .30);
  border-radius: var(--bp-r-sm);
  background: rgba(20, 160, 103, .09);
}
#boleteria-pro .bp-session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#boleteria-pro .bp-session-head strong { display: block; color: var(--bp-ink); font-size: 14px; }
#boleteria-pro .bp-session-head small { display: block; margin-top: 2px; color: var(--bp-ink-3); font-size: 11px; }
#boleteria-pro .bp-session-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#boleteria-pro .bp-session-stats span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: var(--bp-r-sm);
  background: var(--bp-surface);
  color: var(--bp-ink-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#boleteria-pro .bp-session-stats b {
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

#boleteria-pro .bp-locked {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(242, 183, 5, .34);
  border-radius: var(--bp-r-sm);
  background: rgba(242, 183, 5, .10);
}
#boleteria-pro .bp-locked strong { color: var(--bp-ink); font-size: 13px; }
#boleteria-pro .bp-locked span { color: var(--bp-ink-3); font-size: 11.5px; line-height: 1.55; }

/* ---------- Entrada emitida ---------- */
#boleteria-pro .bp-ticket-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px;
  border: 1px dashed var(--bp-green-bright);
  border-radius: var(--bp-r-sm);
  background: rgba(20, 160, 103, .10);
  text-align: center;
}
#boleteria-pro .bp-ticket-code {
  color: var(--bp-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .10em;
  user-select: all;
}
#boleteria-pro .bp-ticket-card small { color: var(--bp-ink-3); font-size: 11.5px; }
#boleteria-pro .bp-ticket-card b {
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Indicadores ---------- */
#boleteria-pro .bp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#boleteria-pro .bp-kpi {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  background: var(--bp-surface);
  box-shadow: var(--bp-shadow);
}
#boleteria-pro .bp-kpi span {
  color: var(--bp-ink-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#boleteria-pro .bp-kpi strong {
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1.05;
}
#boleteria-pro .bp-kpi small { color: var(--bp-ink-3); font-size: 11px; }

/* ---------- Barras ---------- */
#boleteria-pro .bp-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px 10px;
}
#boleteria-pro .bp-bar-name {
  grid-column: 1;
  overflow: hidden;
  color: var(--bp-ink);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#boleteria-pro .bp-bar-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.04em;
  text-align: right;
}
#boleteria-pro .bp-bar-track {
  grid-column: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bp-soft);
}
#boleteria-pro .bp-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bp-green), var(--bp-green-bright));
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
#boleteria-pro .bp-bar-track i.is-alt { background: linear-gradient(90deg, #b98a04, var(--bp-gold)); }
#boleteria-pro .bp-bar-row small {
  grid-column: 1;
  color: var(--bp-ink-3);
  font-size: 10.5px;
}
#boleteria-pro .bp-bar-row + .bp-bar-row { margin-top: 12px; }

/* ---------- Ritmo de venta ---------- */
#boleteria-pro .bp-spark { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--bp-line); }
#boleteria-pro .bp-spark-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 3px;
  height: 54px;
}
#boleteria-pro .bp-spark-col { display: flex; align-items: flex-end; height: 100%; }
#boleteria-pro .bp-spark-col i {
  display: block;
  width: 100%;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(to top, rgba(20, 160, 103, .32), var(--bp-green-bright));
}

/* ---------- Búsqueda y resultados ---------- */
#boleteria-pro .bp-search input { font-size: 16px; }
#boleteria-pro .bp-results { display: grid; gap: 7px; max-height: 340px; overflow-y: auto; }
#boleteria-pro .bp-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 11px 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  background: var(--bp-soft);
}
#boleteria-pro .bp-result-main { grid-column: 1; min-width: 0; }
#boleteria-pro .bp-result-main strong {
  display: block;
  overflow: hidden;
  color: var(--bp-ink);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#boleteria-pro .bp-result-main small { display: block; margin-top: 2px; color: var(--bp-ink-3); font-size: 11px; }
#boleteria-pro .bp-code {
  grid-column: 1;
  justify-self: start;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--bp-surface);
  color: var(--bp-ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  user-select: all;
}
#boleteria-pro .bp-result-total {
  grid-column: 2;
  grid-row: 1;
  color: var(--bp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
#boleteria-pro .bp-state {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#boleteria-pro .bp-state.is-paid { background: rgba(20, 160, 103, .14); color: var(--bp-green); }
/* El dorado puro sobre blanco mide ~1.9:1. Para TEXTO se usa el dorado
   oscuro; el vibrante queda solo para fondos y acentos. */
#boleteria-pro .bp-state.is-in { background: rgba(242, 183, 5, .20); color: #7a5a00; }
#boleteria-pro .bp-state.is-pending { background: rgba(198, 45, 56, .12); color: var(--bp-danger); }

/* ---------- Escritorio ---------- */
@media (min-width: 760px) {
  #boleteria-pro .bp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #boleteria-pro .bp-grid-main,
  #boleteria-pro .bp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #boleteria-pro .bp-root > .bp-grid-2 { margin-top: 0; }
  #boleteria-pro .bp-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #boleteria-pro .bp-col-2 { grid-column: span 1; }
  #boleteria-pro .bp-sale .bp-field:nth-child(3) { grid-column: span 2; }
}

@media (min-width: 1180px) {
  #boleteria-pro .bp-grid-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

@media (prefers-reduced-motion: reduce) {
  #boleteria-pro * { transition-duration: .01ms !important; }
}

/* ---------- Impresión: solo la entrada emitida ---------- */
@media print {
  #boleteria-pro .bp-head,
  #boleteria-pro .bp-form,
  #boleteria-pro .bp-kpis,
  #boleteria-pro .bp-grid-2,
  #boleteria-pro .bp-results,
  #boleteria-pro .bp-search,
  #boleteria-pro .bp-session-head button,
  #boleteria-pro .bp-btn { display: none !important; }
  #boleteria-pro .bp-ticket-card { border-color: #000; background: #fff; color: #000; }
  #boleteria-pro .bp-ticket-code { color: #000; }
}

/* ---------- Anulación y reembolso ---------- */
#boleteria-pro .bp-result-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
#boleteria-pro .bp-mini {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--bp-line);
  border-radius: 999px;
  background: var(--bp-surface);
  color: var(--bp-ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
#boleteria-pro .bp-mini:hover { border-color: var(--bp-green); color: var(--bp-green); }
#boleteria-pro .bp-mini.is-danger:hover { border-color: var(--bp-danger); color: var(--bp-danger); background: rgba(198,45,56,.06); }
#boleteria-pro .bp-mini:disabled { opacity: .5; cursor: wait; }

/* Un pedido anulado o reembolsado sigue visible para la auditoría, pero
   retrocede visualmente: ya no es una entrada válida. */
#boleteria-pro .bp-state.is-void { background: rgba(6,44,31,.09); color: var(--bp-ink-3); }

/* ---------- Canales de pago ---------- */
#boleteria-pro .bp-toggles { display: grid; gap: 8px; }
#boleteria-pro .bp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  background: var(--bp-soft);
  color: var(--bp-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
#boleteria-pro .bp-toggle input {
  width: 20px;
  min-height: 20px;
  height: 20px;
  flex: none;
  padding: 0;
  accent-color: var(--bp-green);
  cursor: pointer;
}
#boleteria-pro .bp-toggle:hover { border-color: var(--bp-green); }
#boleteria-pro .bp-toggle:has(input:checked) {
  border-color: var(--bp-green);
  background: rgba(20, 160, 103, .09);
}
#boleteria-pro .bp-help b { color: var(--bp-ink); }
#boleteria-pro .bp-help i { font-style: italic; }

@media (min-width: 620px) {
  #boleteria-pro .bp-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mismo criterio que en la tienda: con el dedo, 34px es demasiado chico. */
@media (pointer: coarse) {
  #boleteria-pro .bp-mini { min-height: 44px; padding: 0 15px; font-size: 12px; }
}