/* =======================================================
   TEMA Empresas Dimerc
   Generado automáticamente por: php artisan client:add empresasdimerc
   Basado en estructura completa del sistema TUID
   ======================================================= */

/*
 * Colores Corporativos Empresas Dimerc:
 * - Primario: #3b82f6 (HSL: 217, 91%, 60%)
 * - Secundario: #6366f1 (HSL: 239, 84%, 67%)
 */

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

:root {
    /* Color principal */
    --main-h: 217;
    --main-s: 91%;
    --main-l: 60%;
    --main: var(--main-h) var(--main-s) var(--main-l);

    /* Variantes del color principal */
    --main-50: hsl(217, 91%, 95%);
    --main-100: hsl(217, 91%, 90%);
    --main-200: hsl(217, 91%, 80%);
    --main-300: hsl(217, 91%, 70%);
    --main-400: hsl(217, 91%, 60%);
    --main-500: hsl(217, 91%, 60%);
    --main-600: hsl(217, 91%, 55%);
    --main-700: hsl(217, 91%, 50%);
    --main-800: hsl(217, 91%, 45%);
    --main-900: hsl(217, 91%, 40%);

    /* Color secundario / éxito */
    --success-h: 239;
    --success-s: 84%;
    --success-l: 67%;

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

    /* Variables para Dashboard Student */
    --color-primary: #3b82f6;
    --color-secondary: #6366f1;
    --color-accent: #404042;
    --color-success: #6366f1;
}

/* ===================
   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;
}

/* ===================================
   TOP NAVBAR (HEADER)
   =================================== */

.top-navbar {
    background: linear-gradient(135deg, #FFFFFF 0%, #3b82f6 50%, #6366f1 100%);
    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 .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 */
.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;
}

/* ===================
   BUTTONS
=================== */

/* Botones primarios */
.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 */
.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 */
.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 */
.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;
}

.text-primary-600 {
    color: #3b82f6 !important;
}

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

.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;
}

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

.text-success-600,
.text-success-700 {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   LINKS
=================== */

a.text-primary-600:hover {
    color: hsl(217, 91%, 50%) !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
=================== */

/* Gradiente principal */
.client-gradient-primary,
.bg-gradient-primary,
.bg-primary-gradient,
.hero-gradient {
    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 suave secundario */
.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 firma */
.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 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;
}

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

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

.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;
}

.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
=================== */

.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;
}

.stat-number {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

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

.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;
}

.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;
}

.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;
}

.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
=================== */

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

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

.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;
}

.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;
}

.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;
}

.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 PHOSPHOR ICONS
=================== */

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

/* ===================
   CLASES ESPECÍFICAS EMPRESASDIMERC
=================== */

.empresasdimerc-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.empresasdimerc-hero {
    position: relative;
    overflow: hidden;
}

.empresasdimerc-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%;
}

.empresasdimerc-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 EMPRESASDIMERC
=================== */