/**
 * GUÍA DE ESTILO CORPORATIVO - EduTrustQuality
 * 
 * Este archivo contiene las variables, colores y estilos base
 * para aplicar la imagen corporativa en toda la aplicación.
 */

/* ============================================
   VARIABLES DE COLORES CORPORATIVOS
   ============================================ */
:root {
    /* Color Principal - Morado */
    --color-primary: #682682;
    --color-primary-dark: #4d1c5f;
    --color-primary-light: #8a3aa8;
    
    /* Color Secundario - Amarillo */
    --color-secondary: #f2b100;
    --color-secondary-dark: #c4832b;
    --color-secondary-light: #f5c633;
    
    /* Colores Neutros */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-light: #f4f4f4;
    --color-gray-medium: #6c757d;
    --color-gray-dark: #343a40;
    
    /* Colores de Estado */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: var(--color-secondary);
    --color-info: #17a2b8;
}

/* ============================================
   LOGOS - RUTAS Y CLASES
   ============================================ */
/*
 * LOGOS DISPONIBLES:
 * 
 * 1. Logos/imagotipo.png
 *    - Logo completo (imagotipo)
 *    - Usar en headers principales, páginas de inicio
 * 
 * 2. Logos/you_color.png
 *    - Versión en color
 *    - Usar en fondos claros/blancos
 * 
 * 3. Logos/you_negro.png
 *    - Versión en negro
 *    - Usar en fondos claros cuando se necesite contraste
 */

/* Clase base para logos */
.logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.logo-imagotipo {
    content: url('../Logos/imagotipo.png');
}

.logo-color {
    content: url('../Logos/you_color.png');
}

.logo-negro {
    content: url('../Logos/you_negro.png');
}

/* Tamaños predefinidos para logos */
.logo-small {
    max-width: 120px;
    max-height: 60px;
}

.logo-medium {
    max-width: 200px;
    max-height: 100px;
}

.logo-large {
    max-width: 300px;
    max-height: 150px;
}

/* ============================================
   APLICACIÓN DE COLORES CORPORATIVOS
   ============================================ */

/* Botones principales */
.btn-primary,
.btn-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* Botones secundarios */
.btn-secondary-custom {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-black);
}

.btn-secondary-custom:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
}

/* Enlaces */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Headers y títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
}

/* Bordes y acentos */
.border-primary {
    border-color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.bg-secondary-custom {
    background-color: var(--color-secondary) !important;
    color: var(--color-black) !important;
}

/* Sidebar y navegación */
.sidebar {
    background-color: var(--color-white);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Topbar */
.topbar {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-primary);
}

/* Cards y elementos destacados */
.card-header {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Badges */
.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.badge-secondary-custom {
    background-color: var(--color-secondary);
    color: var(--color-black);
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

/* Texto con color corporativo */
.text-primary-custom {
    color: var(--color-primary) !important;
}

.text-secondary-custom {
    color: var(--color-secondary) !important;
}

/* Fondos con color corporativo */
.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-secondary-light {
    background-color: var(--color-secondary-light);
}

/* Sombras con color corporativo */
.shadow-primary {
    box-shadow: 0 0.125rem 0.25rem rgba(104, 38, 130, 0.3) !important;
}

.shadow-secondary {
    box-shadow: 0 0.125rem 0.25rem rgba(242, 177, 0, 0.3) !important;
}

/* Gradientes corporativos */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

/* ============================================
   EJEMPLOS DE USO EN HTML
   ============================================ */
/*
 * 
 * LOGO:
 * <img src="Logos/imagotipo.png" alt="EduTrustQuality" class="logo logo-medium">
 * 
 * LOGO EN COLOR (fondo claro):
 * <img src="Logos/you_color.png" alt="EduTrustQuality" class="logo logo-small">
 * 
 * LOGO EN NEGRO (fondo claro):
 * <img src="Logos/you_negro.png" alt="EduTrustQuality" class="logo logo-small">
 * 
 * BOTÓN PRINCIPAL:
 * <button class="btn btn-primary">Acceder</button>
 * 
 * BOTÓN SECUNDARIO:
 * <button class="btn btn-secondary-custom">Cancelar</button>
 * 
 * TEXTO CON COLOR CORPORATIVO:
 * <p class="text-primary-custom">Texto en morado</p>
 * 
 */