/* Sistema de botones unificado (24/09/2026, aprobado por el usuario via
   preview: https://claude.ai/artifact/AgDkUPa28LdPBvNcirk8BA). Reutiliza los
   MISMOS nombres de clase que ya existian en cada pagina (.btn, .btn-clear,
   .back, .back-btn, .cta) -- cero cambios de HTML, solo una hoja de estilos
   compartida cargada DESPUES del <style> propio de cada pagina para ganar
   la cascada en las reglas que coinciden. Anadidas ademas 4 clases nuevas
   por si se necesitan en el futuro (.btn-primario/.btn-secundario/
   .btn-fantasma/.btn-peligro). */

.btn,
.btn-clear,
.back,
.back-btn,
.cta,
.btn-primario,
.btn-secundario,
.btn-fantasma,
.btn-peligro {
  font-family: 'DM Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Base = nivel "fantasma": acciones secundarias/terciarias (limpiar,
   cancelar, enlaces de vuelta). Las paginas que ya pintan un boton en
   dorado via estilo inline (background:var(--gold)) no se ven afectadas --
   el inline siempre gana sobre esta hoja. */
.btn,
.btn-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  padding: 11px 20px;
  font-size: 14px;
}
.btn:hover,
.btn-clear:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.btn:active,
.btn-clear:active {
  transform: translateY(1px);
}

.back,
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
}
.back:hover,
.back-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

.cta {
  display: inline-block;
  background: #f0c040;
  color: #111;
  text-align: center;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(240,192,64,0.15);
}
.cta:hover {
  background: #ffd166;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240,192,64,0.3);
}

.btn-primario {
  background: #f0c040;
  color: #111;
  border: none;
  padding: 12px 22px;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(240,192,64,0.15);
}
.btn-primario:hover {
  background: #ffd166;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240,192,64,0.3);
}

.btn-secundario {
  background: transparent;
  color: #f0c040;
  border: 1.5px solid rgba(240,192,64,0.5);
  padding: 11px 20px;
  font-size: 14px;
}
.btn-secundario:hover {
  background: rgba(240,192,64,0.1);
  border-color: #f0c040;
}

.btn-fantasma {
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 11px 20px;
  font-size: 14px;
}
.btn-fantasma:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

.btn-peligro {
  background: transparent;
  color: #ff6b6b;
  border: 1.5px solid rgba(255,107,107,0.4);
  padding: 11px 20px;
  font-size: 14px;
}
.btn-peligro:hover {
  background: rgba(255,107,107,0.1);
  border-color: #ff6b6b;
}

/* Accesibilidad: anillo de foco visible al navegar con teclado (Tab) --
   ninguna de estas clases lo tenia antes en ninguna pagina. */
.btn:focus-visible,
.btn-clear:focus-visible,
.back:focus-visible,
.back-btn:focus-visible,
.cta:focus-visible,
.btn-primario:focus-visible,
.btn-secundario:focus-visible,
.btn-fantasma:focus-visible,
.btn-peligro:focus-visible {
  outline: 2px solid #f0c040;
  outline-offset: 2px;
}