/* Maikol Intel — sistema de botones "crystal": vidrio ligero (más FIFA 27
   que el frosted pesado de Apple: menos blur, borde más nítido, el color
   viene de un glow/gradiente en vez de un relleno sólido). Requiere que
   tokens.css se cargue antes para las variables de color.
   Nota: .btn-logout NO está aquí a propósito — el mismo nombre de clase
   se usa en admin/index.html (botón con borde) y quiniela/index.html
   (link de texto subrayado) para dos componentes visualmente distintos;
   centralizarlo rompería uno de los dos. Cada página conserva su regla. */

:root{
  --glass-blur: 14px;
  --glass-sat: 160%;
  --glass-border: rgba(244,246,252,0.14);
  --glass-border-hi: rgba(244,246,252,0.32);
  --glass-fill: rgba(244,246,252,0.05);
}

/* ---------- Primario: CTA principal (gradiente azul→rosa en vidrio) ---------- */
.btn-primary,
.btn-action,
.btn-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; border:1px solid rgba(255,143,199,0.35);
  background:linear-gradient(135deg, rgba(94,168,255,0.20), rgba(255,143,199,0.20));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 22px -12px rgba(255,143,199,0.35);
  color:var(--ice); font-weight:800; font-size:15.5px;
  padding:16px 28px; text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover, .btn-action:hover, .btn-submit:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(94,168,255,0.32), rgba(255,143,199,0.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 32px -12px rgba(255,143,199,0.45);
}
.btn-primary:focus-visible, .btn-action:focus-visible, .btn-submit:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
/* .btn-action / .btn-submit viven en formularios angostos: tamaño más compacto */
.btn-action, .btn-submit{
  width:100%; padding:14px; border-radius:8px; font-size:15px;
}

/* ---------- Secundario: borde translúcido, sin relleno de color ---------- */
.btn-secondary,
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; border:1px solid var(--glass-border);
  background:var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-border-hi);
  color:var(--ice); font-weight:700; font-size:15px;
  padding:15px 24px; text-decoration:none; cursor:pointer;
  transition: all .2s ease;
}
.btn-secondary:hover, .nav-cta:hover{
  border-color:var(--blue); background:rgba(94,168,255,0.10);
  box-shadow: inset 0 1px 0 var(--glass-border-hi), 0 0 16px var(--blue-soft);
}
.btn-secondary:focus-visible, .nav-cta:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.nav-cta{
  padding:10px 18px; border-radius:999px; font-size:14px; white-space:nowrap;
}
/* Variante reducida -- para cuando btn-secondary compite en pantalla con un
   CTA de mayor prioridad (ej. Quiniela junto a Telegram) y no debe pesar
   lo mismo visualmente. */
.btn-secondary.small{
  padding:10px 18px; font-size:13.5px; border-radius:8px;
}

/* ---------- Voto/predicción: analisis (.btn-vote), quiniela (.btn-opt) ---------- */
.btn-vote,
.btn-opt{
  border:1px solid var(--glass-border); border-radius:10px;
  background:var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color:var(--ice); cursor:pointer; outline:none;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-vote{
  padding:20px; font-size:15px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.btn-vote:hover{
  border-color:var(--blue); background:rgba(94,168,255,0.10);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 24px rgba(94,168,255,0.15);
}
.btn-vote.vote-away:hover{
  border-color:var(--pink); background:rgba(255,143,199,0.10);
  box-shadow:0 8px 24px rgba(255,143,199,0.15);
}
.btn-vote .sub{ font-size:11px; font-weight:500; color:var(--slate); text-transform:uppercase; letter-spacing:0.06em; }

.btn-opt{ padding:14px; font-size:13.5px; font-weight:700; }
.btn-opt:hover{ border-color:var(--blue); background:rgba(94,168,255,0.08); }
.btn-opt.selected{
  background:rgba(94,168,255,0.16); border-color:var(--blue); color:var(--blue);
  box-shadow: inset 0 1px 0 var(--glass-border-hi), 0 0 12px rgba(94,168,255,0.18);
}
.btn-opt.pink-hover:hover{ border-color:var(--pink); background:rgba(255,143,199,0.08); }
.btn-opt.pink-hover.selected{
  background:rgba(255,143,199,0.16); border-color:var(--pink); color:var(--pink);
  box-shadow: inset 0 1px 0 var(--glass-border-hi), 0 0 12px rgba(255,143,199,0.18);
}

/* ---------- Telegram: CTA de conversión, deliberadamente SIN vidrio ----------
   Miguel lo pidió explícito el 09/08/2026: el efecto "crystal" translúcido
   no funcionaba como llamado a la acción — demasiado sutil para el botón
   que de verdad convierte. Azul sólido de marca Telegram, ícono real,
   sombra con cuerpo, sin blur. */
.btn-telegram{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(135deg, #34B7F1, #1E96D6);
  box-shadow: 0 10px 26px -8px rgba(30,150,214,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
  color:#fff; font-weight:800; font-size:15.5px;
  padding:16px 30px; text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-telegram svg{ width:20px; height:20px; flex-shrink:0; }
.btn-telegram:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, #3EC1FA, #229ED9);
  box-shadow: 0 16px 34px -8px rgba(30,150,214,0.8), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-telegram:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.btn-telegram.compact{ padding:10px 20px; font-size:14px; border-radius:999px; }
.btn-telegram.compact svg{ width:16px; height:16px; }

/* ---------- Íconos sociales (footer/nav) ---------- */
.social-icons{ display:flex; align-items:center; gap:10px; }
.social-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--glass-border); background:var(--glass-fill);
  color:var(--slate); transition:all .2s ease;
}
.social-icon svg{ width:18px; height:18px; }
.social-icon:hover{
  color:var(--ice); border-color:var(--blue);
  background:rgba(94,168,255,0.12); transform:translateY(-2px);
}

/* ---------- Utilitario admin: rellenar datos de prueba ---------- */
.btn-autofill{
  background:rgba(94,168,255,0.08); border:1px dashed var(--blue); color:var(--blue);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700; font-size:13px;
  display:inline-block; transition:all .2s;
}
.btn-autofill:hover{ background:rgba(94,168,255,0.14); transform:translateY(-1px); }