/* css/botones.css — los dos botones del sitio, en un solo sitio.
 *
 * ============================================================================
 * POR QUÉ ESTE ARCHIVO EXISTE
 * ============================================================================
 * El CSS de este sitio vive inline en cada página, y eso funciona mientras cada
 * regla sea de esa página. `.btn-sec` no lo era: estaba copiado en tipsters.html,
 * metodologia.html, hoy.html y en los dos generadores (verificados y
 * vender-picks). Cinco copias de la misma declaración, y ya habían empezado a
 * separarse — la de metodologia.html llevaba un `margin-top:18px` que ninguna
 * otra tenía.
 *
 * `.btn-pri` nació el 2026-09-17 en hoy.html porque NO EXISTÍA en el repo: el
 * primario verde solo estaba como `.op-gate .btn` dentro de index.html, atado a
 * un contenedor. Antes de que se copiara por tercera vez, se saca aquí.
 *
 * ============================================================================
 * LO QUE NO VA AQUÍ
 * ============================================================================
 * La POSICIÓN. `margin-top`, `width`, `align-self` y demás son de la página que
 * coloca el botón, no del botón, y por eso siguen en el <style> de cada una.
 * Si entraran aquí, la primera página que necesitara otro margen volvería a
 * copiar el bloque entero para cambiar una línea — que es exactamente cómo
 * empezaron las cinco copias.
 *
 * Las variables de color (--green, --ink, --line…) las define cada página en
 * su :root. Este archivo las consume y no las declara: una página sin ellas
 * pintaría botones transparentes, y eso se ve al instante.
 */

.btn-pri,
.btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 18px;
  transition: .12s;
  white-space: nowrap;
}

/* Primario: verde sólido. El borde es del MISMO color que el fondo y no
   `none`, para que mida exactamente igual que el secundario — puestos uno al
   lado del otro, un pixel de diferencia de alto se ve. */
.btn-pri {
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
}

.btn-pri:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

/* Secundario: contorno. */
.btn-sec {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
}

.btn-sec:hover {
  border-color: var(--green-deep);
  color: var(--green-deep);
}