:root{--color-primary: #69bd45;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #4b7e2b;--color-state-hover: #3c6721;--color-state-focus: #3c6721;--color-state-active: #30541a;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fff;--nav-text-color: var(--color-text);--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled)}:root{--nav-bg-color: #341956;--nav-text-color: #ffffff;--color-primary: #4d008c;--btn-accent-color: #4d008c;--link-color: #9967D6;--color-state: #341956;--color-text: #9967D6;--footer-bg-color: #1F0B36;--footer-text-color: #000000;--btn-accent-color-hover: #430082;--btn-accent-color-active: #320071;--link-color-hover: #8f5dcc;--color-state-hover: #2a0f4c;--color-state-focus: #2a0f4c;--color-state-active: #19003b;--footer-text-color-hover: #000000;}
/* 1. FONDO GLOBAL: DEGRADADO FIJO */
body, #page-wrapper, #page, #page-content {
    background-color: #1a0b2e !important;
    background-image: linear-gradient(180deg, #4a148c 0%, #1a0b2e 100%) !important;
    background-attachment: fixed !important;
}

/* 2. BLOQUES: DISEÑO FIJO LAVANDA + BORDE NEÓN */
.card, 
.block, 
#region-main, 
#region-main > .card, 
.tab-content, 
.list-group-item,
.nav-drawer {
    background-color: #F3EFF8 !important; /* Color lavanda fijo */
    color: #1a0b2e !important;           /* Texto oscuro */
    border: 2px solid #ff00ff !important; /* Borde fucsia flúor constante */
    border-radius: 15px !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important; /* Brillo neón suave fijo */
    margin-bottom: 20px !important;
    padding: 20px !important;
    transition: none !important; /* Eliminamos cualquier animación */
    transform: none !important;  /* Eliminamos cualquier movimiento */
}

/* 3. ELIMINAR EFECTOS DE MOUSE (HOVER) */
.card:hover, .block:hover, #region-main:hover {
    background-color: #F3EFF8 !important; /* Mantiene el color */
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important; /* Mantiene el brillo */
    border-color: #ff00ff !important; /* Mantiene el color de borde */
    transform: none !important; /* Evita que se mueva */
}

/* 4. AJUSTE DE PESTAÑAS (Para que se unan al bloque) */
.nav-tabs .nav-link.active {
    background-color: #F3EFF8 !important;
    border: 2px solid #ff00ff !important;
    border-bottom-color: #F3EFF8 !important;
    color: #7b0099 !important;
    opacity: 1 !important;
}

/* 5. TEXTOS DE ADMINISTRACIÓN LEGIBLES */
#region-main h2, 
#region-main label, 
#region-main p, 
#region-main legend,
.form-control-static {
    color: #1a0b2e !important;
}

#page-footer {
    display: none !important;
}

/* FORZAR TAMAÑO DE LOGO TUI */

/* 1. Atacar la clase específica que encontraste */
.masthead_logo--header_img {
    height: 50px !important;    /* Ajusta este número para el alto */
    max-height: 80px !important; 
    width: auto !important;     /* Mantiene la proporción para que no se deforme */
    max-width: none !important; /* Quita límites de ancho */
}

/* 2. Agrandar el contenedor que envuelve al logo */
.masthead_logo--header {
    height: auto !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. Asegurar que la barra negra/morada crezca con el logo */
header[data-region="navbar"], 
.navbar {
    min-height: 70px !important; /* Si el logo es de 70px, la barra debe ser un poco más grande */
}

/* Opción 1: Apuntando al formulario directamente */
#login {
    padding-top: 120px !important; /* Espacio para el logo */
    background-image: url(/womdev/theme/image.php/ventura/theme/1790604236/logo_login) !important;
    background-position: top center !important;
    background-size: 200px auto !important; /* Ajusta el ancho aquí */
    background-repeat: no-repeat !important;
}

/* Opción 2: Si tu tema usa una caja central específica */
.login-box::before, .login-container::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 20px !important;
    background-image: url(/womdev/theme/image.php/ventura/theme/1790604236/logo_login) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Convierte la lista en mosaico */
.block_program_completion .content ul,
.block_totara_program .content ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
}

/* Da formato de tarjeta a cada programa */
.block_program_completion .content ul li,
.block_totara_program .content ul li {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* 1. Convertir la lista en mosaico */
.mosaico-programas ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
}

/* 2. Estilo de cada tarjeta */
.mosaico-programas li {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 3. Espacio base para las imágenes */
.mosaico-programas li::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
    background-color: #e9ecef !important; /* Color gris si falta la imagen */
}

/* 4. Inyección de imágenes según el orden de la lista */
/* Ítem 1: Onboarding Líder Corporativo (Externo) */
.mosaico-programas li:nth-child(1)::before {
    background-image: url('URL_DE_TU_IMAGEN_1.jpg') !important;
}

/* Ítem 2: Onboarding Rol General (Externo) */
.mosaico-programas li:nth-child(2)::before {
    background-image: url('URL_DE_TU_IMAGEN_2.jpg') !important;
}

/* Ítem 3: Programa N2 */
.mosaico-programas li:nth-child(3)::before {
    background-image: url('URL_DE_TU_IMAGEN_3.jpg') !important;
}

/* Ocultar si el pie del mosaico dice Curso */
.block_current_learning-tile:has(*:contains("Curso")) {
    display: none !important;
}