/* Swinger Party — tema neón (Fase 18, parte D): componentes globales con los tokens de css/tokens.css.
 * Se carga DESPUÉS de style.css y ANTES de tv.css (en tele manda tv.css). Cada valor lleva reserva por si falta la variable.
 * Compatibilidad con Chromium ~60: sin gap en flexbox (márgenes), sin inset, aspect-ratio ni min()/max()/clamp(). */

body {
  font-family: var(--sp-font-body, 'DM Sans', 'Segoe UI', system-ui, sans-serif);
  color: var(--sp-text, #F6F1FA);
  background: radial-gradient(ellipse at 50% 0%, #3A1260 0%, rgba(58, 18, 96, 0) 70%) no-repeat, #0F0A1C;
  background: radial-gradient(ellipse at 50% 0%, var(--sp-bg-glow, #3A1260) 0%, rgba(58, 18, 96, 0) 70%) no-repeat, var(--sp-bg, #0F0A1C);
}
h2, h3, .panel-title { font-family: var(--sp-font-title, 'Bricolage Grotesque', system-ui, sans-serif); }
.setup h2 { color: var(--sp-text-3, #E3D9FF); font-weight: 800; }
.setup label { color: var(--sp-text-2, #CDBFE6); }
.hint { color: var(--sp-text-2, #CDBFE6); }

/* ---- Tarjetas ---- */
.setup {
  background: rgba(255, 255, 255, 0.04); background: var(--sp-card-bg, rgba(255, 255, 255, 0.04));
  border: 2px solid rgba(139, 92, 255, 0.35);
  border-radius: 22px;
  box-shadow: none;
}
.log-panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(139, 92, 255, 0.35); box-shadow: none; border-radius: 18px; }

/* ---- Botones: principal (píldora con degradado), secundario (contorno violeta), Paso (contorno turquesa) ---- */
button {
  min-height: 46px; min-height: var(--sp-btn-h, 46px);
  padding: 0 26px;
  font-family: var(--sp-font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 800; font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, #FF3D8B 0%, #FF7A45 100%); background: var(--sp-btn-grad, linear-gradient(135deg, #FF3D8B 0%, #FF7A45 100%));
  border: 0; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(255, 61, 139, 0.35);
}
button:hover { transform: none; filter: brightness(1.08); box-shadow: 0 3px 14px rgba(255, 61, 139, 0.5); }
button.secondary {
  color: #F6F1FA; color: var(--sp-text, #F6F1FA);
  background: rgba(139, 92, 255, 0.12); border: 2px solid #8B5CFF; border: 2px solid var(--sp-violet, #8B5CFF);
  box-shadow: none;
}
button.secondary:hover { background: rgba(139, 92, 255, 0.24); box-shadow: none; }
button.pass, #btnPasoBar {
  color: #F6F1FA; color: var(--sp-text, #F6F1FA);
  background: rgba(61, 224, 200, 0.10); border: 2px solid #3DE0C8; border: 2px solid var(--sp-turquoise, #3DE0C8);
  box-shadow: none;
}
button.pass:hover, #btnPasoBar:hover { background: rgba(61, 224, 200, 0.2); box-shadow: none; }
button:focus { outline: 3px solid #fff; outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: 0; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.setup input:focus, .setup select:focus { border-color: #8B5CFF; border-color: var(--sp-violet, #8B5CFF); box-shadow: 0 0 0 3px rgba(139, 92, 255, 0.3); }

/* ---- Jugadores compactos (fichas de 52 px y panel de edición) con los colores y bordes nuevos ---- */
.player-grid { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(139, 92, 255, 0.2); }
.players-section .ptile { border: 2px solid rgba(139, 92, 255, 0.25); background: rgba(255, 255, 255, 0.05); font-family: var(--sp-font-body, 'DM Sans', system-ui, sans-serif); }
.players-section .ptile:hover { background: rgba(139, 92, 255, 0.16); }
.players-section .ptile:focus { outline: 3px solid #FFC94D; outline: 3px solid var(--sp-gold, #FFC94D); outline-offset: 1px; }
.players-section .ptile.on { border-color: #FF3D8B; border-color: var(--sp-magenta, #FF3D8B); background: rgba(255, 61, 139, 0.16); }
.pt-t small { color: #CDBFE6; color: var(--sp-text-2, #CDBFE6); }
.players-head h3 { color: #E3D9FF; color: var(--sp-text-3, #E3D9FF); }
.pp { background: #1b1030; border: 2px solid rgba(139, 92, 255, 0.55); border-radius: 18px; }
.pp h3, .pp-row label, .pp-lab { color: #E3D9FF; color: var(--sp-text-3, #E3D9FF); }
.pp-emojis .pp-emoji.on { border-color: #FF3D8B; border-color: var(--sp-magenta, #FF3D8B); background: rgba(255, 61, 139, 0.28); }
.pp-emojis .pp-emoji:focus { outline: 3px solid #FFC94D; outline: 3px solid var(--sp-gold, #FFC94D); }

/* ---- Cabecera: cara de Piñita + logotipo en Pacifico con neón magenta ---- */
.brand-bar h1 {
  font-family: var(--sp-font-logo, 'Pacifico', cursive);
  font-weight: 400; letter-spacing: 0; font-size: 2.1rem; line-height: 1.2;
  color: #FFE3F0;
  background: none; -webkit-text-fill-color: #FFE3F0; filter: none;
  text-shadow: 0 0 4px #FF3D8B, 0 0 12px rgba(255, 61, 139, 0.7);
}
.brand-bar .mascot-head { height: 56px; margin-right: 12px; filter: none; }
@media (min-width: 900px) { .brand-bar h1 { font-size: 2.7rem; } }


/* ---- Interruptores (switch): nada de cuadrados nativos. Apagado gris violeta, encendido turquesa con brillo; 44×26 mínimo y con foco visible ---- */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; flex: none; display: inline-block;
  width: 44px !important; min-width: 44px; height: 26px; margin: 0 10px 0 0 !important; padding: 0; vertical-align: middle;
  border: 2px solid #4a4266; border-radius: 13px; background: #2c2640; cursor: pointer;
}
input[type="checkbox"]::before { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #9a8fb8; }
input[type="checkbox"]:checked { border-color: #3de0c8; background: #3de0c8; box-shadow: 0 0 10px rgba(61, 224, 200, 0.6); }
input[type="checkbox"]:checked::before { left: 20px; background: #0f0a1c; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="checkbox"]:focus { outline: 3px solid #fff; outline-offset: 3px; }
input[type="checkbox"]:focus:not(:focus-visible) { outline: 0; }
input[type="checkbox"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.setup label.check, label.check { line-height: 1.3; }

/* en la tele manda tv.css (.tv-mode input: fondo blanco): los interruptores conservan su paleta y son más grandes */
html.tv-mode input[type="checkbox"] { width: 3rem !important; min-width: 3rem; height: 1.7rem; padding: 0; border: 0.15rem solid #4a4266; background: #2c2640; border-radius: 0.85rem; }
html.tv-mode input[type="checkbox"]::before { left: 0.15rem; top: 0.15rem; width: 1.1rem; height: 1.1rem; background: #b3a8d1; }
html.tv-mode input[type="checkbox"]:checked { border-color: #3de0c8; background: #3de0c8; }
html.tv-mode input[type="checkbox"]:checked::before { left: 1.35rem; background: #0f0a1c; }