/* =======================================================
   TEMA IDC - Instituto de Desarrollo y Capacitación
   Basado en estructura MIXAFEX con colores IDC
   ======================================================= */

/*
 * Este archivo implementa la identidad visual de IDC
 * Usando variables HSL dinámicas
 * 
 * Colores Corporativos IDC:
 * - Naranja Principal: #ff7115 (HSL: 24, 100%, 54%)
 * - Rojo Principal: #db0d17 (HSL: 0, 87%, 46%)
 * - Rojo Oscuro: #b30b13 (HSL: 0, 87%, 40%)
 * 
 * Diseño: Moderno, dinámico, con naranja y rojo dominante
 */

/* ===================
   VARIABLES CSS IDC
   Sobrescribe las variables --main del sistema
=================== */

:root {
    /* Azul #1111bf como color principal */
    --main-h: 240;
    --main-s: 81%;
    --main-l: 37%;
    --main: var(--main-h) var(--main-s) var(--main-l);

    /* Variantes del color principal #1e1e9e */
    --main-50: hsl(240, 68%, 95%);
    --main-100: hsl(240, 68%, 90%);
    --main-200: hsl(240, 68%, 80%);
    --main-300: hsl(240, 68%, 70%);
    --main-400: hsl(240, 68%, 60%);
    --main-500: hsl(240, 68%, 37%);
    /* base color #1e1e9e */
    --main-600: hsl(240, 68%, 33%);
    --main-700: hsl(240, 68%, 29%);
    --main-800: hsl(240, 68%, 25%);
    --main-900: hsl(240, 68%, 21%);

    /* Morado #b016f5 como color de éxito */
    --success-h: 270;
    --success-s: 91%;
    --success-l: 52%;

    /* Gris como secundario */
    --secondary-h: 0;
    --secondary-s: 0%;
    --secondary-l: 53%;

    /* Variables para Dashboard Student */
    --color-primary: hsl(var(--main-h), var(--main-s), var(--main-l));
    --color-secondary: hsl(var(--success-h), var(--success-s), var(--success-l));
    --color-terciary: #00aaff;
    --color-accent: #404042;
    --color-success: hsl(var(--success-h), var(--success-s), var(--success-l));
}

/* ===================
   ESTILOS PARA RANKING BADGES
=================== */

.badge-position-0 {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, color-mix(in srgb, hsl(var(--success-h), var(--success-s), var(--success-l)) 87%, transparent) 100%) !important;
}

.badge-position-1 {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 100%) !important;
}

.badge-position-2 {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, color-mix(in srgb, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 87%, transparent) 100%) !important;
}

.badge-position-3 {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, color-mix(in srgb, hsl(var(--main-h), var(--main-s), var(--main-l)) 80%, transparent) 100%) !important;
}

.badge-position-4 {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, color-mix(in srgb, hsl(var(--success-h), var(--success-s), var(--success-l)) 80%, transparent) 100%) !important;
}

/* ===================
   SOBRESCRITURAS DEL SISTEMA BASE
   Reemplaza colores con paleta MIXAFEX
=================== */

/* ===================================
   TOP NAVBAR (HEADER) - NARANJA IDC
   =================================== */
.top-navbar {
    background: var(--navbar-bg, linear-gradient(135deg, #FFFFFF 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 50%, hsl(var(--success-h), var(--success-s), var(--success-l)) 100%)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
    border-bottom: 0px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.header-logo img {
    max-height: 45px !important;
}

.top-navbar .header-logo img {
    /* filter: brightness(0) invert(1);*/
    /* Logo blanco sobre fondo morado */
}

.top-navbar .users {
    background-color: #ffffff !important;
}

.top-navbar .flex-align .text-gray-500,
.top-navbar .text-gray-500 {
    color: var(--color-text-on-primary, #ffffff) !important;
}

.top-navbar .toggle-btn {
    color: var(--color-text-on-primary, #ffffff) !important;
}

.top-navbar .toggle-btn:hover {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* Headers y navegación -> Morado Principal */
.client-header,
.header,
.navbar,
.sidebar-header {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Botones primarios -> Azul Acento */
.btn-primary,
.bg-primary-600,
.hover-bg-primary-600:hover,
.bg-main-600,
.hover-bg-main-600:hover,
.btn-main {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-primary:hover,
.bg-primary-600:hover,
.btn-main:hover {
    background-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
    border-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Botones secundarios -> Morado Oscuro */
.btn-secondary,
.bg-secondary-600 {
    background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    border-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-secondary:hover {
    background-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
    border-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
}

/* Botones de éxito -> Azul */
.btn-success,
.bg-success-600 {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-success:hover {
    background-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
}

/* Botones outline -> Morado Principal */
.btn-outline-main,
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.btn-outline-main:hover,
.btn-outline-primary:hover {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* ===================
   TEXTOS Y TÍTULOS
=================== */

/* Títulos principales -> Morado Principal */
.text-client-primary,
.text-main-600,
h1.client-title,
h2.client-title,
h3.client-title {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* Textos secundarios -> Morado Oscuro */
.text-client-secondary {
    color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
}

/* Textos de éxito -> Azul */
.text-success-600,
.text-success-700 {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   COMPONENTES
=================== */

/* Cards con borde de marca */
.card-client-border {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.card-client-header {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) 100%) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Badges */
.badge-client-primary,
.badge-main {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.badge-client-success {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.badge-client-secondary {
    background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Alertas */
.alert-client-success {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1) !important;
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
}

.alert-client-info {
    background-color: hsla(var(--main-h), var(--main-s), var(--main-l), 0.1) !important;
    border-left: 4px solid hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* Progress bars */
.progress-bar-client,
.progress-bar-main {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)), hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%))) !important;
}

/* ===================
   GRADIENTES IDC - MORADOS Y AZULES
=================== */

/* Gradiente principal MORADO - Para elementos destacados */
.client-gradient-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 100%) !important;
}

/* Gradiente azul suave */
.client-gradient-success {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, hsl(var(--success-h), var(--success-s), calc(var(--success-l) + 8%)) 100%) !important;
}

/* Gradiente de 3 colores MORADO DOMINANTE */
.client-gradient-signature {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 50%, hsl(var(--success-h), var(--success-s), var(--success-l)) 100%) !important;
}

/* Gradiente suave para fondos */
.client-gradient-light {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), 95%) 0%, hsl(var(--main-h), var(--main-s), 93%) 100%) !important;
}

/* Gradiente morado oscuro a claro */
.client-gradient-purple {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 100%) !important;
}

/* ===================
   TABLAS
=================== */

.table thead {
    background-color: #f9fafb !important;
    color: #374151 !important;
}

.table tbody tr:hover {
    background-color: #f9fafb !important;
}

/* Filas destacadas */
.table tbody tr.client-highlight {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.05) !important;
}

/* ===================
   FORMULARIOS
=================== */

/* Inputs con foco -> Azul */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    box-shadow: 0 0 0 0.2rem hsla(var(--success-h), var(--success-s), var(--success-l), 0.25) !important;
}

/* Labels importantes */
.form-label.client-required::after {
    content: " *";
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   NAVEGACIÓN Y MENÚ
=================== */

.breadcrumb-item.active {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* ===================
   DASHBOARD ESPECÍFICO
=================== */

/* Cards de estadísticas */
.stat-card {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.stat-card:hover {
    box-shadow: 0 8px 20px hsla(var(--main-h), var(--main-s), var(--main-l), 0.15) !important;
}

.stat-icon {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Números grandes */
.stat-number {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* ===================
   COMPONENTES ESTUDIANTE
=================== */

/* Hero section del estudiante - GRADIENTE MORADO */
.student-hero {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 100%) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Cards de curso */
.course-card {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.course-card:hover {
    box-shadow: 0 12px 28px hsla(var(--main-h), var(--main-s), var(--main-l), 0.15) !important;
}

/* Badges de estado de curso */
.status-badge.status-progress {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.95) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.status-badge.status-completed {
    background-color: hsla(var(--main-h), var(--main-s), var(--main-l), 0.95) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.status-badge.status-not-started {
    background-color: rgba(107, 114, 128, 0.95) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Barra de progreso del curso */
.course-progress-bar {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)), hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%))) !important;
}

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

/* Checkmarks */
.client-checkmark {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    font-weight: bold;
}

.client-checkmark::before {
    content: "✓ ";
}

/* Iconos */
.client-icon-primary {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.client-icon-success {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.client-icon-secondary {
    color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
}

/* Bordes */
.border-client-primary {
    border-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.border-client-success {
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* Backgrounds de hover */
.hover-bg-client:hover {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1) !important;
}

/* ===================
   ANIMACIONES
=================== */

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.client-float {
    animation: float 6s ease-in-out infinite;
}

/* Transiciones suaves */
.client-transition {
    transition: all 0.3s ease;
}

/* ===================
   RESPONSIVE
=================== */

@media (max-width: 768px) {
    .stat-card {
        border-left: none !important;
        border-top: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    }

    .card-client-border {
        border-left: none !important;
        border-top: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    }
}

/* ===================
   MODO OSCURO (OPCIONAL)
=================== */

@media (prefers-color-scheme: dark) {
    .client-card {
        background-color: #1a1a1a !important;
        border-color: #2a2a2a !important;
    }

    .client-text {
        color: #e0e0e0 !important;
    }
}

/* ===================
   SOBRESCRITURAS DE PHOSPHOR ICONS
=================== */

.ph-fill.client-icon {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   CLASES ESPECÍFICAS IDC
=================== */

/* Logo container */
.idc-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.idc-logo-text {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    font-weight: 800 !important;
}

/* Hero sections con decoración */
.idc-hero {
    position: relative;
    overflow: hidden;
}

.idc-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: hsla(var(--success-h), var(--success-s), var(--success-l), 0.15);
    border-radius: 50%;
}

/* Sidebar sticky para cursos */
.idc-sidebar-sticky {
    position: sticky;
    top: 102px;
}

/* ===================
   PRINTS
=================== */

@media print {

    .client-header,
    .sidebar {
        display: none !important;
    }

    .client-card {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
}

/* ===================
   FIN DEL TEMA IDC
=================== */