═══════════════════════════════════════════════════════════════════════════════
   DONCELLA UI DESIGN SYSTEM - GUÍA DE ESTILO INTEGRAL
   Versión: 1.0 | Fecha: Febrero 2026
   Alcance: Sistema de Votación "Tu Día Más Fácil"
   Stack Técnico: CakePHP + Bootstrap + Custom CSS
═══════════════════════════════════════════════════════════════════════════════

╔═══════════════════════════════════════════════════════════════════════════╗
║                         1. PALETA DE COLORES                              ║
╚═══════════════════════════════════════════════════════════════════════════╝

┌─ COLORES DE MARCA (Brand Colors) ─────────────────────────────────────────┐

  PACIFIC BLUE (Identidad Principal)
  ├─ Primary:     #00ADBB  (rgb(0, 173, 187)) - Encabezados, Iconos
  ├─ Action:      #5FCFD5  (rgb(95, 207, 213)) - Botones, Enlaces
  └─ Hover:       #4db6bb  - Estado hover de botones

  NEUTRALES & TEXTO
  ├─ Body Text:   #676767  (Gris Medio) - Texto principal
  ├─ Headings:    #6F7173  (Gris Corporativo) - Títulos de secciones
  ├─ Background:  #F6F8FA  (Aqua Haze) - Fondos de sección alternativos
  └─ White:       #FFFFFF  - Fondo base de página y contenedores

└───────────────────────────────────────────────────────────────────────────┘

┌─ COLORES DE INTERFAZ (UI Elements) ───────────────────────────────────────┐

  ESTADOS DE INTERACCIÓN
  ├─ Success:     #5FCFD5  (Usado en confirmación de voto)
  ├─ Error:       #E74C3C  (Rojo estándar para validaciones)
  └─ Border:      #DDE3E8  (Gris Claro) - Bordes de inputs y separadores

└───────────────────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════════════════════╗
║                        2. TIPOGRAFÍA Y TEXTO                              ║
╚═══════════════════════════════════════════════════════════════════════════╝

┌─ FAMILIAS TIPOGRÁFICAS ───────────────────────────────────────────────────┐

  PRIMARIA: 'Open Sans', sans-serif
  ├─ Uso:         Encabezados (H1, H2, H3)
  ├─ Estilo:      Uppercase (Mayúsculas) en títulos principales
  └─ Peso:        300 (Light) para impacto elegante

  SECUNDARIA: 'Source Sans Pro', sans-serif
  ├─ Uso:         Cuerpo de texto, párrafos, listas
  ├─ Peso:        400 (Regular), 600 (Semi-Bold)
  └─ Legibilidad: Alta para lectura extendida

  BOTONES: 'Roboto', sans-serif
  ├─ Uso:         Texto interno de botones
  └─ Estilo:      Uppercase, Tracking amplio

└───────────────────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════════════════════╗
║                  3. COMPONENTES DE VOTACIÓN (FEATURE)                     ║
╚═══════════════════════════════════════════════════════════════════════════╝

┌─ VIDEO CARD (Tarjeta de Opción) ──────────────────────────────────────────┐

  Contenedor:
  ├─ Background:  #FFFFFF
  ├─ Borde:       1px solid #DDE3E8
  ├─ Radius:      0px (Esquinas cuadradas, estilo corporativo)
  └─ Hover:       Shadow suave o borde #00ADBB

  Contenido:
  ├─ Thumbnail:   Ratio 16:9, ancho completo
  ├─ Título:      Video # - [Nombre Grupo/Participante]
  └─ Botón:       "VOTAR" (Centrado inferior)

└───────────────────────────────────────────────────────────────────────────┘

┌─ LOGIN / IDENTIFICACIÓN ──────────────────────────────────────────────────┐

  Input Field:
  ├─ Estilo:      Minimalista
  ├─ Borde:       Solo inferior (Underline) o Box suave #DDE3E8
  ├─ Padding:     15px
  └─ Focus:       Color #00ADBB

  Botón de Acceso:
  ├─ Clase:       .generic-button
  ├─ Color:       #5FCFD5 (Texto Blanco)
  ├─ Forma:       Rectangular (No radius)
  └─ Texto:       INGRESAR / COMENZAR

└───────────────────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════════════════════╗
║                     4. ARQUITECTURA TÉCNICA                               ║
╚═══════════════════════════════════════════════════════════════════════════╝

┌─ CONTROLADORES Y RUTAS ───────────────────────────────────────────────────┐

  Endpoint: /tudiamasfacil
  Controlador: TudiamasfacilController.php

  Acciones:
  1. index()     -> Pantalla de Login (Selección de Empleado)
  2. vote()      -> Listado de 5 Videos (Grid)
  3. cast()      -> Proceso de voto (POST)
  4. ranking()   -> Resultados en tiempo real (Post-voto)

└───────────────────────────────────────────────────────────────────────────┘

┌─ MODELO DE DATOS ─────────────────────────────────────────────────────────┐

  Tabla: tudiamasfacil_employees (Participantes)
  ├─ id:          INT (PK)
  ├─ name:        VARCHAR (Nombre completo para display)
  ├─ reference_id: VARCHAR (Identificador opcional de RRHH o Lista)
  ├─ has_voted:   BOOLEAN (0/1)
  └─ voted_video_id: INT (Nullable)

  Tabla: tudiamasfacil_videos (Opciones)
  ├─ id:          INT (PK)
  ├─ title:       VARCHAR (Ej: "Video 1 - Equipo A")
  ├─ embed_url:   VARCHAR (Link Yotube/Vimeo)
  ├─ thumb_url:   VARCHAR (Ruta imagen local)
  └─ vote_count:  INT (Contador desnormalizado para performance)

└───────────────────────────────────────────────────────────────────────────┘