/* ── Guion Bridge Pro – Botón con progreso circular ─────────────────────── */

.gb-button-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
  gap: 14px;
  /* Establecer base de fuente aquí para que todo lo de adentro use px reales */
  font-size: 16px !important;
}

/* ── Contenedor del anillo ───────────────────────────────────────────────── */
.gb-unlock-outer {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gb-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.gb-ring-track {
  fill: none;
  stroke: rgba(16,185,129,.15);
  stroke-width: 5;
}
.gb-ring-fill {
  fill: none;
  stroke: #10b981;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 408;
  stroke-dashoffset: 408;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 6px rgba(16,185,129,.5));
}

/* ── Botón circular interior ─────────────────────────────────────────────── */
.gb-unlock-btn {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: none;
  background: #10b981;
  color: #fff;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 24px rgba(16,185,129,.35);
  transition: background .35s, box-shadow .35s, transform .25s;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* Base de font fija para que los hijos no dependan del tema */
  font-size: 16px !important;
}
.gb-unlock-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 62%);
  pointer-events: none;
}
.gb-unlock-btn:not(:disabled):hover {
  transform: scale(1.06);
  box-shadow: 0 10px 36px rgba(16,185,129,.55);
}
.gb-unlock-btn:not(:disabled):active { transform: scale(.97); }
.gb-unlock-btn.gb-ready,
.gb-unlock-btn.gb-bypass {
  cursor: pointer;
  animation: gb-pulse 1.8s ease-in-out infinite;
}

@keyframes gb-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(16,185,129,.4); }
  50%     { box-shadow: 0 6px 40px rgba(16,185,129,.75), 0 0 0 14px rgba(16,185,129,.1); }
}

/* ── Íconos del candado ──────────────────────────────────────────────────── */
.gb-lock-wrap {
  position: relative;
  width: 40px;
  height: 44px;
  flex-shrink: 0;
}
.gb-lock-icon {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 44px;
  transition: opacity .4s ease, transform .4s ease;
}
.gb-lock-closed { opacity: 1; transform: scale(1) rotate(0deg); }
.gb-lock-open   { opacity: 0; transform: scale(.55) rotate(-20deg); }

.gb-unlock-btn.gb-ready .gb-lock-closed,
.gb-unlock-btn.gb-bypass .gb-lock-closed {
  opacity: 0;
  transform: scale(.55) rotate(20deg);
}
.gb-unlock-btn.gb-ready .gb-lock-open,
.gb-unlock-btn.gb-bypass .gb-lock-open {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ── Label del botón ─────────────────────────────────────────────────────── */
.gb-unlock-btn .gb-btn-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-align: center;
  max-width: 88px;
  line-height: 1.25;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── Badge con segundos restantes ────────────────────────────────────────── */
.gb-seconds-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 30px;
  height: 30px;
  background: #fff;
  color: #059669;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 2;
  transition: opacity .3s, transform .3s;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
.gb-seconds-badge.hidden {
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}

/* ── Hint debajo del botón ───────────────────────────────────────────────── */
.gb-button-wrap .gb-unlock-hint {
  font-size: 14px !important;
  color: #6b7280 !important;
  text-align: center;
  min-height: 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .gb-unlock-outer { animation: gb-fadein .5s ease both; }
  @keyframes gb-fadein {
    from { opacity:0; transform:translateY(10px) scale(.94); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
}

/* Gracenzy native finish */
.gb-button-wrap {
  margin: 36px 0 !important;
  font-family: inherit !important;
}

.gb-ring-track {
  stroke: rgba(37, 99, 235, .16) !important;
}

.gb-ring-fill {
  stroke: var(--accent, #2563eb) !important;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, .35)) !important;
}

.gb-unlock-btn {
  background: linear-gradient(135deg, var(--accent, #2563eb), #1d4ed8) !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, .28) !important;
}

.gb-unlock-btn:not(:disabled):hover {
  box-shadow: 0 22px 54px rgba(37, 99, 235, .34) !important;
}

.gb-seconds-badge {
  color: var(--accent, #2563eb) !important;
}

.gb-button-wrap .gb-unlock-hint {
  color: #64748b !important;
}