# 🎨 Colores del Skin Law Firm 2

Guía de referencia de los colores definidos en el skin `skin-law-firm-2.css` y cómo se aplican en el sistema.

---

## 🎯 Colores Principales del Skin

### Primary (Verde Lima)
- **Color principal**: `#bfdd48`
- **Variantes**:
  - `--primary-100`: `#b7d932` (más oscuro)
  - `--primary-200`: `#b4d728` (más oscuro)
  - `--primary-300`: `#abcc26` (más oscuro)
  - `--primary--100`: `#c7e15e` (más claro)
  - `--primary--200`: `#cae368` (más claro)
  - `--primary--300`: `#cee573` (más claro)

**Uso**: Botones primarios, enlaces, estados activos, elementos destacados.

---

### Secondary (Verde Azulado Oscuro)
- **Color principal**: `#03464c`
- **Variantes**:
  - `--secondary-100`: `#022f33` (más oscuro)
  - `--secondary-200`: `#022427` (más oscuro)
  - `--secondary-300`: `#01191b` (más oscuro)
  - `--secondary--100`: `#045d65` (más claro)
  - `--secondary--200`: `#046871` (más claro)
  - `--secondary--300`: `#05737d` (más claro)

**Uso**: Fondos oscuros, textos secundarios, elementos de contraste.

---

### Tertiary (Turquesa)
- **Color principal**: `#2baab1`
- **Variantes**:
  - `--tertiary-100`: `#26969c` (más oscuro)
  - `--tertiary-200`: `#248c92` (más oscuro)
  - `--tertiary-300`: `#218388` (más oscuro)
  - `--tertiary--100`: `#30bec6` (más claro)
  - `--tertiary--200`: `#34c6ce` (más claro)
  - `--tertiary--300`: `#3fc9d0` (más claro)

**Uso**: Acentos, elementos terciarios, highlights.

---

### Quaternary (Gris Azulado)
- **Color principal**: `#383f48`
- **Variantes**: Múltiples tonos disponibles

**Uso**: Fondos neutros, bordes, elementos secundarios.

---

## 📋 Configuración en el Sistema

### `config/site.php` - Sección `auth`

```php
'auth' => [
    'primary_color' => '#bfdd48',        // Verde lima del skin
    'primary_color_hover' => '#b7d932',  // Hover más oscuro
],
```

---

## 🎨 Aplicación de Colores

### 1. Login (`auth/layout.blade.php`)

**Colores aplicados**:
- Botones primarios: `#bfdd48`
- Hover de botones: `#b7d932`
- Enlaces: `#bfdd48`
- Focus en inputs: `#bfdd48` con rgba para sombra

---

### 2. Dashboard (`pages/index.blade.php`)

**Colores aplicados**:
- Botón "Ver Sitio Web": `#bfdd48`
- Estados activos de navegación: `#bfdd48`
- Enlaces primarios: `#bfdd48`
- Focus states: `#bfdd48` con rgba

---

### 3. Componentes Metronic

El skin CSS se carga automáticamente y aplica:
- Variables CSS: `--primary`, `--secondary`, `--tertiary`
- Clases Bootstrap: `.btn-primary`, `.text-primary`, `.bg-primary`
- Componentes Metronic: Usan las variables CSS automáticamente

---

## 🔄 Uso de Variables CSS

El skin define variables CSS que se pueden usar directamente:

```css
/* Ejemplo de uso */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-100);
}
```

---

## 📊 Paleta Completa

| Color | Hex | Uso Principal |
|-------|-----|---------------|
| Primary | `#bfdd48` | Botones, enlaces, estados activos |
| Primary Hover | `#b7d932` | Estados hover |
| Secondary | `#03464c` | Fondos oscuros, textos secundarios |
| Tertiary | `#2baab1` | Acentos, highlights |
| Quaternary | `#383f48` | Fondos neutros |

---

## ✅ Elementos que Usan Estos Colores

### Frontend
- ✅ Botones primarios
- ✅ Enlaces y hover states
- ✅ Estados activos de navegación
- ✅ Focus states en formularios
- ✅ Badges y etiquetas
- ✅ Iconos destacados

### Backend (Dashboard)
- ✅ Botones primarios
- ✅ Enlaces de acción
- ✅ Estados activos del menú
- ✅ Cards destacadas
- ✅ Badges de estado

---

## 🔧 Cómo Actualizar Colores

### Opción 1: Actualizar Skin CSS

Editar `public/template/css/skins/skin-law-firm-2.css`:
```css
:root {
    --primary: #tu-color;
    --primary-100: #tu-color-hover;
}
```

### Opción 2: Actualizar Configuración

Editar `config/site.php`:
```php
'auth' => [
    'primary_color' => '#tu-color',
    'primary_color_hover' => '#tu-color-hover',
],
```

---

## 📚 Referencias

- [Skin CSS](./skin-law-firm-2.css) - Archivo completo del skin
- [Configuraciones](./04-configuraciones.md)
- [Producto Law Firm 2](./03-producto-law-firm-2.md)

---

**Última actualización**: 2025-01-XX  
**Versión**: 1.0.0