/* LA TARJETA DEL BONO (P1-240). La pinta `ops_core/_bono_tarjeta.html`; el diseño es
   `design/bonos/index.html`. Solo tokens de `paleta.css`: el azul para el bono, el menta si lo
   puede usar otra persona, el amarillo de siempre para «caduca», gris caducado, blanco gastado.
   Va en `base.html` porque la tarjeta sale en páginas y en paneles que llegan por AJAX (el
   popup de la cita): una hoja por página no la cubriría en todos. */

.bt {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  gap: 14px; border-radius: 22px; padding: 18px 18px 16px; color: #fff; text-decoration: none;
  background: var(--g-azul); box-shadow: var(--sombra-azul); margin: 0 0 12px;
}
a.bt:hover { color: #fff; text-decoration: none; filter: brightness(1.03); }
a.bt:focus-visible { outline: 3px solid var(--c-azul-tx); outline-offset: 3px; }
/* El brillo de arriba a la derecha y el filo de luz: lo que la hace tarjeta y no fila. */
.bt::before { content: ""; position: absolute; top: -45%; right: -25%; width: 62%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .24), transparent);
  z-index: -1; pointer-events: none; }
.bt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, .45); pointer-events: none; }

.bt--menta { background: var(--g-menta); box-shadow: var(--sombra-menta); }
.bt--gris { background: linear-gradient(165deg, color-mix(in srgb, var(--c-text3) 62%, #fff) 0%,
  var(--c-text3) 55%, color-mix(in srgb, var(--c-text3) 70%, var(--c-tinta)) 100%); box-shadow: var(--sombra-card); }
.bt--blanco { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border);
  box-shadow: var(--sombra-card); }
a.bt--blanco:hover { color: var(--c-text); }
.bt--blanco::before, .bt--blanco::after { display: none; }

.bt__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; }
.bt__nombres { min-width: 0; }
.bt__arriba { margin: 0 0 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt__nombre { margin: 0; font-size: var(--t2, 19px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  overflow-wrap: anywhere; }
.bt__ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.bt--blanco .bt__ico { background: var(--c-surface2); box-shadow: none; }
.bt__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.bt__cuenta { flex: none; font-size: var(--t3, 16px); font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* Los sellos: uno por sesión. */
.bt__sellos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.bt__sello { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .55); font-size: var(--t4, 13px); font-weight: 800;
  color: rgba(255, 255, 255, .92); font-variant-numeric: tabular-nums; }
.bt__sello svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.bt__sello--hecha { background: #fff; border-color: #fff; color: var(--c-azul); }
.bt--menta .bt__sello--hecha { color: var(--c-menta); }
.bt--gris .bt__sello--hecha { color: var(--c-text2); }
.bt--blanco .bt__sello { border-color: var(--c-border); color: var(--c-text3); }
.bt--blanco .bt__sello--hecha { background: var(--c-surface2); border-color: var(--c-surface2); color: var(--c-text2); }
.bt__sello--siguiente { border-style: dashed; border-color: #fff; animation: btLate 1.8s ease-in-out infinite; }
.bt__sello--perdida { opacity: .45; }
@keyframes btLate { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .bt__sello--siguiente { animation: none; } }
.bt__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Más de 20 sesiones: la barra, con la misma cuenta. */
.bt__barra { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.bt__barra i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.bt--blanco .bt__barra { background: var(--c-surface2); }
.bt--blanco .bt__barra i { background: var(--c-text3); }

.bt__saldo { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; }
.bt__n { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bt__de { font-size: var(--t3, 16px); opacity: .92; }

.bt__pie { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.bt__chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px;
  font-size: var(--t4, 13px); font-weight: 700; line-height: 1.25; background: rgba(255, 255, 255, .2);
  color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt__chip--aviso { background: var(--c-amarillo); color: var(--c-dia-vac-fg); }
.bt__chip--mal { background: #fff; color: var(--c-rose-tx); }
.bt--blanco .bt__chip { background: var(--c-surface2); color: var(--c-text2); }
.bt--blanco .bt__chip--mal { background: var(--c-rose-soft); color: var(--c-rose-tx); }

/* La mini: en listas, la cita y la venta. */
.bt--mini { gap: 11px; padding: 14px 16px; border-radius: 18px; }
.bt--mini .bt__sello { width: 32px; height: 32px; font-size: 12px; }
.bt--mini .bt__sello svg { width: 15px; height: 15px; }
.bt--mini .bt__sellos { gap: 7px; }

/* Lo que va debajo de una tarjeta: el botón de gastar y el «sin poder gastarlo». */
.bt-accion { display: flex; flex-direction: column; gap: 8px; margin: -2px 0 14px; }
.bt-boton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 46px; padding: 11px 16px; border: 0; border-radius: 14px; cursor: pointer;
  font: 800 var(--t3, 16px) 'Manrope', system-ui, sans-serif; color: #fff;
  background: var(--g-azul); box-shadow: var(--sombra-azul); }
.bt-boton:hover { opacity: .94; }
.bt-boton:disabled { opacity: .55; cursor: default; }
.bt-boton--menta { background: var(--g-menta); box-shadow: var(--sombra-menta); }
.bt-nota { margin: 0; font-size: var(--t4, 13px); color: var(--c-text2); line-height: 1.45; }
/* La siguiente sesión (fase 3): el interruptor y el hueco, en una fila que se parte en el móvil. */
.bt-sig { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); }
.bt-sig__si { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: 1 1 auto;
  font: 700 var(--t3, 16px) 'Manrope', system-ui, sans-serif; color: var(--c-text); }
.bt-sig__si input { width: 20px; height: 20px; accent-color: var(--c-menta); flex: none; }
.bt-sig__hueco { flex: 1 1 200px; min-width: 0; height: 42px; border-radius: 12px; border: 1px solid var(--c-border);
  padding: 0 10px; background: var(--c-surface2); color: var(--c-text);
  font: 700 var(--t3, 16px) 'Manrope', system-ui, sans-serif; }
.bt-sig:has(input:not(:checked)) .bt-sig__hueco { opacity: .45; }

@media (max-width: 420px) {
  .bt { padding: 16px 15px 14px; }
  .bt__sello { width: 36px; height: 36px; }
  .bt__n { font-size: 34px; }
}