# 🎨 Ejemplos de Personalización del Botón Authentik

## 📝 Textos de Botón Personalizados

### Ejemplos en Español

- "Iniciar sesión con Authentik"
- "Acceder con Authentik"
- "Login SSO"
- "Autenticación Corporativa"
- "Acceso Empresarial"

### Ejemplos en Inglés

- "Login with Authentik"
- "Sign in with Authentik"
- "SSO Login"
- "Corporate Authentication"
- "Enterprise Access"

### Ejemplos en Francés

- "Se connecter avec Authentik"
- "Connexion Authentik"
- "Authentification SSO"
- "Accès Entreprise"

## 🖼️ Imágenes de Botón

### URLs de Imágenes Recomendadas

#### Imágenes de Authentik Oficiales

```
https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon_left_brand.svg
https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon.svg
```

#### Imágenes Personalizadas

```
https://tu-servidor.com/images/authentik-logo.png
https://tu-servidor.com/images/company-logo.png
https://tu-servidor.com/images/sso-icon.svg
```

### Formatos Soportados

- **SVG** (recomendado para escalabilidad)
- **PNG** (para imágenes con transparencia)
- **JPG** (para fotografías)
- **ICO** (para iconos)

### Tamaños Recomendados

- **Ancho**: 20-24px
- **Alto**: 20-24px
- **Formato**: Cuadrado o rectangular

## 🎯 Ejemplos de Configuración

### Configuración Básica

```json
{
  "button_text": "Iniciar sesión con Authentik",
  "button_image": "",
  "button_image_alt": "Authentik"
}
```

### Configuración con Imagen Personalizada

```json
{
  "button_text": "Acceso Corporativo",
  "button_image": "https://tu-servidor.com/images/company-logo.png",
  "button_image_alt": "Logo de la empresa"
}
```

### Configuración Solo Imagen

```json
{
  "button_text": "Authentik",
  "button_image": "https://raw.githubusercontent.com/goauthentik/authentik/main/web/src/assets/images/icon.svg",
  "button_image_alt": "Authentik SSO"
}
```

## 🔧 Configuración desde el Panel

### Pasos para Personalizar

1. **Ve a Administración > Extensiones > Authentik SSO**

2. **Configura el texto del botón**:

   - Campo: "Texto del botón"
   - Ejemplo: "Acceso Corporativo"

3. **Configura la imagen del botón**:

   - Campo: "Imagen del botón"
   - Ejemplo: "https://tu-servidor.com/images/logo.png"

4. **Configura el texto alternativo**:

   - Campo: "Texto alternativo de la imagen"
   - Ejemplo: "Logo de la empresa"

5. **Guarda la configuración**

6. **Prueba el resultado** en la página de login

## 🎨 Estilos CSS Personalizados

Si necesitas personalizar más el botón, puedes añadir CSS personalizado:

```css
/* Botón personalizado para Authentik */
.authentik-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.authentik-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.authentik-button img {
  filter: brightness(0) invert(1);
}
```

## 📱 Responsive Design

El botón se adapta automáticamente a diferentes tamaños de pantalla:

- **Desktop**: Botón completo con imagen y texto
- **Tablet**: Botón completo con imagen y texto
- **Mobile**: Botón completo con imagen y texto (se ajusta al ancho)

## 🔍 Accesibilidad

### Texto Alternativo

- Siempre proporciona un texto alternativo descriptivo
- Ejemplo: "Logo de Authentik" en lugar de "Imagen"

### Contraste

- Asegúrate de que el texto sea legible
- Usa colores con suficiente contraste

### Navegación por Teclado

- El botón es completamente accesible por teclado
- Usa Tab para navegar hasta el botón
- Usa Enter o Espacio para activar

## 🚀 Mejores Prácticas

### Texto del Botón

- ✅ Mantén el texto corto y claro
- ✅ Usa un lenguaje consistente con tu marca
- ✅ Evita jerga técnica innecesaria

### Imagen del Botón

- ✅ Usa imágenes de alta calidad
- ✅ Mantén el tamaño pequeño (20-24px)
- ✅ Usa formatos optimizados (SVG preferible)
- ✅ Asegúrate de que la imagen sea accesible

### Configuración

- ✅ Prueba la configuración en diferentes dispositivos
- ✅ Verifica que la imagen se carga correctamente
- ✅ Asegúrate de que el texto alternativo es descriptivo