/* ===== GENRYUSAI: PAGINA VINCULAR (se carga después de style.css) ===== */

.vinc { max-width: 560px; margin: 0 auto; padding: 48px 16px 70px; }
.vinc-head { text-align: center; }
.vinc .eyebrow { color: #ef7770; }
.vinc h1 { margin: 16px 0 10px; font-size: clamp(28px, 8vw, 40px); letter-spacing: -1px; line-height: 1.15; }
.vinc-lead { color: var(--muted); font-size: 14px; line-height: 1.8; }

.badge {
  display: inline-flex; align-items: center; margin-top: 14px; padding: 5px 12px;
  border: 1px solid #3a3a3a; color: #cfcfcf; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
}
.badge .dot { margin-right: 8px; background: #888; box-shadow: none; }
.badge[data-on="true"] { border-color: #1f5a34; color: #8ee0a8; }
.badge[data-on="true"] .dot { background: #3ddc84; box-shadow: 0 0 10px rgba(61, 220, 132, .6); }
.badge[data-on="false"] { border-color: #5a2020; color: #ef9a94; }
.badge[data-on="false"] .dot { background: #e33b35; box-shadow: 0 0 10px rgba(227, 59, 53, .6); }

.panel {
  margin-top: 28px; padding: 24px 20px; text-align: center;
  border: 1px solid #2a1818; border-top: 3px solid #c52c2c; background: #110c0c;
}
.panel h2 { margin-bottom: 14px; font-size: 13px; letter-spacing: 2px; color: #ef7770; }
.panel p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.panel[hidden] { display: none; }

label { display: block; margin-bottom: 8px; text-align: left; color: #cfcfcf; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
input {
  width: 100%; min-height: 52px; padding: 12px 14px; color: #fff; background: #0a0a0a;
  border: 1px solid #3a3a3a; border-radius: 6px; font: inherit; font-size: 18px;
}
input::placeholder { color: #8a8a8a; }
.hint { margin-top: 8px; text-align: left; font-size: 12px !important; }
.err { margin-top: 8px; text-align: left; color: #ff9d97 !important; font-size: 13px !important; }
.err[hidden] { display: none; }
form .button { width: 100%; margin-top: 18px; }

.vinc .button.primary { background: #c52c2c; border-color: #c52c2c; color: #fff; }
.vinc .button.primary:hover { background: #e13b35; border-color: #e13b35; }
.vinc .button { min-height: 52px; font-size: 14px; }

.code {
  margin: 6px 0 16px; color: #fff !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(34px, 11vw, 52px) !important; font-weight: 700; letter-spacing: 4px; line-height: 1.2 !important;
  user-select: all;
}
.timer { margin-top: 16px; font-size: 11px !important; letter-spacing: 1.5px; }
.timer strong { color: #fff; font-variant-numeric: tabular-nums; }
.steps { margin: 20px 0 0 20px; text-align: left; color: #cfcfcf; font-size: 14px; line-height: 1.8; }
.steps li { margin-bottom: 8px; padding-left: 4px; }

.spinner {
  width: 38px; height: 38px; margin: 0 auto 16px; border: 3px solid #3a2020;
  border-top-color: #e33b35; border-radius: 50%; animation: giro .9s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.ok { border-top-color: #3ddc84; }
.ok h2 { color: #8ee0a8; }
.bad .button { margin-top: 18px; width: 100%; }

:focus-visible { outline: 3px solid #ffb4ae; outline-offset: 3px; }
h2[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
@media (min-width: 701px) { .vinc { padding-top: 70px; } .panel { padding: 30px 28px; } }