.sn-tor-layout {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.sn-tor-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 220px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #111, #0c0c0c);
  color: #eee;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.sn-tor-badge .sn-tor-top {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}
.sn-tor-badge .sn-tor-bottom {
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.9;
}
.sn-tor-badge .sn-tor-sub {
  display: block;
  color: #aaa;
  margin-bottom: 3px;
}
.sn-tor-badge:disabled,
.sn-tor-badge[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}
.sn-tor-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.sn-tor-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #ddd;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sn-tor-side i {
  margin-bottom: 2px;
}
.sn-tor-side-count {
  font-size: 0.8rem;
  color: #aaa;
}

/* Estados */
.sn-tor-badge.st-open {
  background: linear-gradient(180deg, #0d3b18, #0a2b12);
  border-color: #125f26;
}
.sn-tor-badge.st-inscribed {
  background: linear-gradient(180deg, #0d2b3b, #0a1f2b);
  border-color: #12605f;
}
.sn-tor-badge.st-locked {
  background: linear-gradient(180deg, #2b2b2b, #212121);
}
.sn-tor-badge.st-full {
  background: linear-gradient(180deg, #3b251f, #24120f);
  border-color: #5f2a12;
}
.sn-tor-badge.st-closed {
  background: linear-gradient(180deg, #2b2b2b, #1c1c1c);
}
.sn-tor-badge.st-blocked-config {
  background: linear-gradient(180deg, #3b2b0d, #2b1f07);
}
.sn-tor-badge.st-blocked-ban {
  background: linear-gradient(180deg, #3b0d0d, #2b0707);
}
.sn-tor-badge.st-blocked-ban .sn-tor-top:before {
  content: "⛔";
  margin-right: 6px;
}

.sn-blink {
  animation: snblink 0.9s infinite;
}
.sn-tor-inscrito {
  color: #8bd48b;
  font-weight: 600;
}
@keyframes snblink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Móvil: el botón ocupa todo el ancho cuando está en el contenedor móvil del template */
@media (max-width: 768px) {
  .tor-inscripcion-mobile .sn-tor-layout {
    width: 100%;
  }
  .tor-inscripcion-mobile .sn-tor-badge {
    width: 100%;
  }
}