(y las clases .h1–.h6 de Bootstrap)
en IVI Glance. La fuente solo existe en regular; el peso que se vea
en negritas es sintético del navegador. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-title) !important;
}
/* h2 a 22px (token del tema, con fallback); las reglas con más
especificidad e !important (títulos de cards, etc.) siguen mandando */
h2 {
font-size: var(--font-size-22, 22px) !important;
}
/* Titulares de las secciones OneTech (Ciberseguridad / Data&AI) que
no siempre son y quedarían fuera de la regla de arriba */
.cyber-standalone__title,
.cyber-card__overlay-title,
.ivirma-cyber-modal__title,
.ivirma-cyber-modal__footer-title,
.dai-section-title {
font-family: var(--font-title) !important;
}
/* Botones nativos de Totara/Bootstrap también en IVI Glance.
(.ivi-btn ya lo hace desde su regla base, sección 27) */
button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
.tui-formBtn {
font-family: var(--font-title) !important;
}
/* Selectores con [class] para subir especificidad sin usar IDs (cada [class] suma 0,1,0) */
html body .slickslider .titol,
html body .slickslider[class] .titol[class],
html body .block_slickslider .conttext .titol,
html body .block_slickslider[class] .conttext[class] .titol[class],
html body .block_slickslider .elslide .conttext .titol,
html body .block_slickslider[class] .elslide[class] .conttext[class] .titol[class],
html body .path-totara-program .descprograma h2,
html body .ascoursetitle {
font-family: "IVI Glance", "Noto Sans" !important;
}
/* Título de curso: navy en vez del teal legacy (#006975) que viene inline
en la plantilla; !important para ganar al style="color:…" del elemento.
Incluye el .text_to_html anidado por si algún tema le fija color propio. */
html body .ascoursetitle,
html body .ascoursetitle .text_to_html {
color: var(--navy-blue) !important;
}
/* Texto/intro de curso: negro en vez del gris legacy (#666666) que viene
inline en la plantilla; !important para ganar al style="color:…". */
html body .ascourseintro,
html body .ascourseintro .text_to_html {
color: var(--black) !important;
}
/* Icono "Inicio" de la cabecera: Material Symbols calendar_month en light
blue (sustituye el fa-calendar con inline #006975); !important para ganar
al style="color:…" del elemento. Fusionado desde css-adicional.css. */
html body .ascabecera .asinfoelem i.fa-calendar {
font-family: "Material Symbols Outlined" !important;
font-weight: normal;
color: var(--light-blue, #004DF0) !important;
font-size: 1.6em;
line-height: 1;
vertical-align: -0.23em;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
}
html body .ascabecera .asinfoelem i.fa-calendar::before {
content: "calendar_month" !important;
}
/* Icono "Ponente" de la cabecera: Material Symbols record_voice_over en light
blue (sustituye el fa-user con inline #006975); mismo patrón que "Inicio".
Fusionado desde css-adicional.css. */
html body .ascabecera .asinfoelem i.fa-user {
font-family: "Material Symbols Outlined" !important;
font-weight: normal;
color: var(--light-blue, #004DF0) !important;
font-size: 1.6em;
line-height: 1;
vertical-align: -0.23em;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
}
html body .ascabecera .asinfoelem i.fa-user::before {
content: "record_voice_over" !important;
}
/* Cabecera de curso: ocultar el dato vacío (Inicio / Ponente…). El valor de
cada .asinfoelem va en su último ; si está vacío (sin fecha/valor
detrás de la etiqueta), se oculta toda la línea (icono + etiqueta).
Solo CSS (:has + :empty). Fusionado desde css-adicional.css. */
.ascabecera .asinfoelem:has(> span > span:empty) {
display: none !important;
}
/* Teal legacy inline (#006975) → navy, GENERAL. No se puede seleccionar
"por color computado"; se cazan los style="" inline que contienen #006975
(case-insensitive) y se fuerza el texto a navy. Cubre el uso habitual
(texto: títulos de curso, iconos). Si algún elemento usa #006975 como
fondo/borde inline, necesitaría una regla propia. 2026-09-03. */
[style*="#006975" i] {
color: var(--navy-blue, #08004F) !important;
}
.block_slickslider .slick-prev:before,
.block_slickslider .slick-next:before {
font-size: 25px !important;
}
/* --- 1.5 Navegación global --- */
.nav.nav-tabs {
background-color: var(--color-white);
border-bottom: 3px solid var(--color-primary-light) !important;
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
padding-bottom: 0;
}
.nav.nav-tabs:active {
border-radius: var(--border-radius-large) 0 0 0;
}
.nav-tabs > li > a {
border-radius: var(--border-radius-xl);
color: var(--color-text-light) !important;
font-weight: 500;
padding: 12px var(--spacing-xl);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:active {
background: var(--color-primary-light);
border-top: 0;
color: white !important;
border-radius: var(--border-radius-small);
box-shadow: none;
margin: 0;
}
.nav-tabs > li.active > a::after {
display: none;
}
.format-onetopicas .tab_content.marker {
font-weight: 500;
}
.nav-tabs > li.active .tab_content.marker {
color: var(--color-white) !important;
}
.format-onetopicas ul.nav-tabs li.active a .tab_content.dimmed {
color: var(--color-white) !important;
}
/* Nav tabs estilo botón/píldora en light blue, acotado a .tabtree (no toca
otros navs). Inactivas: píldora blanca con borde+texto light-blue. Activa:
rellena de light-blue con texto blanco. Sin barra inferior redondeada.
Va después de las reglas base de §1.5 + especificidad extra (.tabtree) para
sobrescribirlas. La variante teal de la BD de certificados (body.cmid-20259
.tabtree) tiene mayor especificidad y prevalece en esa página.
Fusionado desde css-adicional.css. */
.tabtree .nav.nav-tabs {
background: transparent !important;
border-bottom: 3px solid var(--light-blue, #004DF0) !important;
border-radius: 0 !important;
padding-bottom: 0 !important;
}
.tabtree .nav-tabs > li {
margin: 0 8px 6px 0 !important;
border: 0 !important;
}
.tabtree .nav-tabs > li > a {
border: 1.5px solid transparent !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--light-blue, #004DF0) !important;
font-weight: 600 !important;
padding: 8px 18px !important;
transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
}
.tabtree .nav-tabs > li > a .tab_content,
.tabtree .nav-tabs > li > a span {
color: inherit !important;
}
.tabtree .nav-tabs > li > a:hover,
.tabtree .nav-tabs > li > a:focus {
background: var(--bg-blue, #DCE6FF) !important;
color: var(--light-blue, #004DF0) !important;
}
.tabtree .nav-tabs > li.active > a,
.tabtree .nav-tabs > li.active > a:hover,
.tabtree .nav-tabs > li.active > a:focus,
.tabtree .nav-tabs > li.active > a:active {
background: var(--light-blue, #004DF0) !important;
border-color: var(--light-blue, #004DF0) !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(0, 77, 240, 0.25) !important;
}
.tabtree .nav-tabs > li.active > a .tab_content,
.tabtree .nav-tabs > li.active > a span {
color: #fff !important;
}
/* --- 1.6 Estados de actividades globales --- */
li.activity.label,
li.activity.statusok,
li.activity.statuswarning,
li.activity.statusserious,
li.activity.statuscritical,
.file-picker td.label,
.file-picker td.statusok,
.file-picker td.statuswarning,
.file-picker td.statusserious,
.file-picker td.statuscritical {
color: var(--color-text-gray);
}
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content {
overflow: visible;
}
/* --- 1.7 Ocultar elementos globales --- */
a[href*="/message/notificationpreferences.php"],
a[href*="/message/edit.php"] {
display: none;
}
.block_html.block.course-menu {
display: none !important;
}
/* --- 1.8 Notificaciones popup --- */
/* Badge de recuento (nº de mensajes/notificaciones) en light blue
(antes --color-primary-light = teal; rebranding cabecera 2026-09-03). */
.popover-region .count-container {
background-color: var(--light-blue);
}
.notification-area .control-area .content .content-item-container.selected {
background-color: var(--color-secondary-dark);
border-color: var(--color-secondary-dark);
}
.notification-area .content-area .header {
height: 70px;
border-bottom: none;
padding: var(--spacing-medium);
font-weight: bold;
background-color: var(--color-background);
}
.notification-area .content-area > .content a {
font-weight: 500;
}
/* --- 1.9 Iconos navegación del topbar (SVG de marca) ---
Ajustes, mensajes y notificaciones. Los SVG están subidos a la
plataforma (local_uploadfiles/additionalimages); se aplican como
máscara para poder colorearlos con la marca (--navy-blue).
IMPORTANTE: se acotan al BOTÓN de cada sección del topbar
(.totara_core__QuickAccess_icon y los .popover-region-toggle), NO a la
clase de icono en general. Así el engranaje del sidebar y los de
"Preferencias" dentro de los paneles desplegables conservan el icono
predefinido de la plataforma. */
.totara_core__QuickAccess_icon .flex-icon.tfont-var-gear::before,
.popover-region-messages .popover-region-toggle .flex-icon.email.actua-icon::before,
.popover-region-notifications .popover-region-toggle .flex-icon.notification-non-filled.actua-icon::before {
content: "" !important;
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-color: var(--navy-blue);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Ajustes (engranaje del menú de acceso rápido) — conserva la separación
a la derecha del original */
.totara_core__QuickAccess_icon .flex-icon.tfont-var-gear::before {
margin-right: 8px;
-webkit-mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/ajustes.svg");
mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/ajustes.svg");
}
/* Mensajes (sobre del botón del topbar) */
.popover-region-messages .popover-region-toggle .flex-icon.email.actua-icon::before {
-webkit-mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/mensajes.svg");
mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/mensajes.svg");
}
/* Notificaciones (campana del botón del topbar) */
.popover-region-notifications .popover-region-toggle .flex-icon.notification-non-filled.actua-icon::before {
-webkit-mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/notificaciones.svg");
mask-image: url("https://ivirma.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/notificaciones.svg");
}
/* --- 1.11 Breadcrumbs --- */
.breadcrumb li:nth-child(2):has(a[href*="reports"]) {
display: none;
}
/* Sin migas de pan en las Homes interna y externa (dashboards 9 y 6).
Se oculta solo la lista,
no .breadcrumb-container entero, para no perder los botones de
edición que el tema pinta ahí (Personalizar esta página). */
#page-totara-dashboard-9 .breadcrumb-container .breadcrumb-nav,
#page-totara-dashboard-6 .breadcrumb-container .breadcrumb-nav {
display: none;
}
.breadcrumb {
color: var(--light-blue);
}
/* --- 1.11b Navegación superior (subnav blanca, selección en azul) --- */
.totaraNav nav.totaraNav_sub {
background-color: white;
}
.totaraNav_sub--list_item_selected {
border-bottom-color: var(--light-blue, #004DF0);
}
.totaraNav_sub--list_item_selected .totaraNav_sub--list_item_link:after {
color: var(--light-blue);
}
.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_label::after {
border-width: medium;
/* Línea de la sección activa pegada al borde INFERIOR del rectángulo del
menú. La barra centra los ítems, así que la línea (que cae a la altura
del texto) se empuja hacia abajo hasta el fondo. --nav-sel-drop es el
único valor a ajustar. HTML: bloques/3-codigo-actual/main-navigation.html. */
--nav-sel-drop: 18px;
transform: translateY(var(--nav-sel-drop)) !important;
}
/* --- 1.12 Responsive general --- */
@media (min-width: 768px) {
.totaraNav_prim .masthead_logo--header_img {
max-width: 250px;
}
}
/* --- 1.11 Footer --- */
.footercolumn a,
#page-footer .second-page-footer .pie .dcha a {
color: #ffffff85 !important;
}
.footercolumn a:hover,
#page-footer .second-page-footer .pie .dcha a:hover {
color: #ffffff !important;
}
.second-page-footer {
border-top: 1px solid #ffffff80;
}
/* --- 1.12 Multiidioma global --- */
.lang-cs .ividb_es, .lang-de .ividb_es, .lang-en .ividb_es, .lang-it .ividb_es, .lang-pt .ividb_es, .lang-sv .ividb_es,
.lang-es .ividb_cs, .lang-de .ividb_cs, .lang-en .ividb_cs, .lang-it .ividb_cs, .lang-pt .ividb_cs, .lang-sv .ividb_cs,
.lang-es .ividb_de, .lang-cs .ividb_de, .lang-en .ividb_de, .lang-it .ividb_de, .lang-pt .ividb_de, .lang-sv .ividb_de,
.lang-es .ividb_en, .lang-cs .ividb_en, .lang-de .ividb_en, .lang-it .ividb_en, .lang-pt .ividb_en, .lang-sv .ividb_en,
.lang-es .ividb_it, .lang-cs .ividb_it, .lang-de .ividb_it, .lang-en .ividb_it, .lang-pt .ividb_it, .lang-sv .ividb_it,
.lang-es .ividb_pt, .lang-cs .ividb_pt, .lang-de .ividb_pt, .lang-en .ividb_pt, .lang-it .ividb_pt, .lang-sv .ividb_pt,
.lang-es .ividb_sv, .lang-cs .ividb_sv, .lang-de .ividb_sv, .lang-en .ividb_sv, .lang-it .ividb_sv, .lang-pt .ividb_sv {
display: none;
}
/* ============================================================
2. LOGIN — #page-login-index
============================================================ */
#page-login-index #fons-login {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 40px;
}
/* Card: un único rectángulo redondeado (sin franja superior del logo a
todo lo ancho) y la columna izquierda alineada arriba. Fondo: degradado
lineal de blanco (100% opaco al 18% → 50% al 100%), en diagonal
arriba-izquierda → abajo-derecha (según Figma). */
#page-login-index .loginbox.clearfix.twocolumns {
width: auto;
margin: 0 100px 0 auto;
display: flex;
align-items: flex-start;
position: relative;
background: linear-gradient(135deg, #ffffff 18%, rgba(255, 255, 255, 0.5) 100%);
padding: 0px;
border-radius: var(--border-radius-large);
}
/* Logo dentro de la columna izquierda. La imagen la pone Totara (estilo
inline del ); aquí solo se recoloca arriba-centrado en la columna. */
#page-login-index .loginpanel h2 {
position: absolute;
top: 36px;
left: 0;
right: auto;
width: 428px;
height: 56px;
background-color: transparent;
background-position: center;
background-size: 260px;
border-radius: 0;
font-size: 0;
}
/* Panel derecho: navy "flotando" dentro del card (margen por los 4 lados
y esquinas redondeadas) */
#page-login-index .loginpanel {
order: 2;
background-color: var(--navy-blue);
color: #fff !important;
margin: var(--spacing-large);
padding: var(--spacing-xl);
max-width: 373px;
border-radius: var(--border-radius-large);
}
/* Etiquetas del formulario sin iconos de persona/candado */
#page-login-index .loginform div:nth-child(1):before,
#page-login-index .loginform div:nth-child(4):before {
display: none !important;
}
/* Inputs blancos con texto navy */
#page-login-index .loginbox .loginform .form-input input {
background-color: #fff !important;
color: var(--navy-blue);
border: none;
border-radius: 8px;
}
#page-login-index .forgetpass {
line-height: 1.4em !important;
}
/* Enlace "¿Olvidó su nombre de usuario o contraseña?" en azul claro */
#page-login-index .forgetpass a {
color: var(--bg-blue) !important;
line-height: 1.4em !important;
font-size: 14px;
}
#page-login-index .forgetpass a:hover {
color: white !important;
}
/* Botón "Iniciar sesión": azul brillante, texto blanco y en negrita.
Noto Sans porque 'IVI Glance' (forzada en el head) solo tiene el peso
normal cargado; Noto Sans 700 sí está disponible. */
#page-login-index .loginpanel #loginbtn {
color: #fff;
background-color: var(--light-blue);
font-family: 'Noto Sans', -apple-system, sans-serif !important;
font-weight: 700 !important;
}
#page-login-index .loginpanel #loginbtn:hover {
color: #fff;
background-color: var(--blue-hover);
}
#page-login-index .potentialidp img.icon {
display: none;
}
/* Botón Office 365 / SSO: pill blanco con borde navy y texto en negrita */
#page-login-index .potentialidp a.btn.btn-default {
background-color: #fff !important;
color: var(--navy-blue) !important;
border: 1.5px solid var(--navy-blue) !important;
border-radius: var(--border-radius-xl) !important;
font-family: 'Noto Sans', -apple-system, sans-serif !important;
font-weight: 700 !important;
}
#page-login-index .potentialidp a.btn.btn-default:hover {
background-color: var(--bg-blue) !important;
color: var(--navy-blue) !important;
}
/* Icono del botón Office 365: rejilla en navy (glyph de Material Symbols,
cargado en el head; el SVG monocromo anterior no se veía sobre blanco) */
#page-login-index .potentialidp a.btn.btn-default::before {
content: "grid_view";
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-size: 20px;
line-height: 1;
width: auto;
height: auto;
background: none;
color: var(--navy-blue);
margin-right: 8px;
vertical-align: middle;
}
/* Textos multiidioma para login */
#page-login-index .subcontent.loginsub::before {
content: "";
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.5em;
}
#page-login-index.lang-es .subcontent.loginsub::before {
content: "Accede con tu usuario y contraseña recibidos por correo electrónico:";
}
#page-login-index.lang-en .subcontent.loginsub::before {
content: "Log in with your username and password received by email:";
}
#page-login-index.lang-it .subcontent.loginsub::before {
content: "Accedi con il tuo nome utente e password ricevuti via e-mail:";
}
#page-login-index.lang-pt .subcontent.loginsub::before {
content: "Acesse com seu usuário e senha recebidos por e-mail:";
}
#page-login-index.lang-cz .subcontent.loginsub::before {
content: "Přihlaste se pomocí uživatelského jména a hesla obdrženého e-mailem:";
}
#page-login-index.lang-sv .subcontent.loginsub::before {
content: "Logga in med ditt användarnamn och lösenord som du fått via e-post:";
}
/* Aviso de "Cookies": no se muestra en el diseño nuevo */
.loginbox .desc {
display: none;
}
.signuppanel h2 {
display: none !important;
}
.signuppanel .externalaccess h2:first-child {
display: inherit;
font-family: 'GothamRounded';
color: #fff;
text-align: center;
margin-top: 0px;
}
.signuppanel .subcontent.potentialidps h6 {
display: none;
}
.signuppanel .subcontent.potentialidps .potentialidplist {
width: 100% !important;
text-align: center !important;
margin: var(--spacing-small);
}
.signuppanel .subcontent.potentialidps .potentialidplist a.btn.btn-default,
#page-login-index .loginpanel #loginbtn {
padding: 12px 18px !important;
max-width: 100%;
}
/* Columna izquierda: hueco arriba (padding-top) para el logo recolocado */
#page-login-index .signuppanel {
order: 1;
max-width: 428px;
width: 100%;
background-color: transparent;
color: #444243;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
align-content: center;
padding: 110px 40px 0px 40px;
border-bottom-left-radius: var(--border-radius-large);
}
#page-login-index .signuppanel .login-top h3 {
text-align: center !important;
color: var(--color-primary) !important;
font-family: "IVI Glance", "Noto Sans" !important;
font-weight: Bold;
font-size: 2.2em !important;
}
#page-login-index .signuppanel .login-top {
margin-bottom: var(--spacing-xl);
}
/* "Si trabajas en IVI RMA" (span) y "Si el acceso mediante Office..." (em)
en navy y centrados */
#page-login-index .signuppanel .login-top span,
#page-login-index .signuppanel .login-detalles em {
font-size: 15px;
text-align: center !important;
display: block;
line-height: 1.4em !important;
color: var(--navy-blue);
}
#page-login-index .signuppanel .login-top span {
font-size: 1.1em;
font-weight: 700;
}
/* Columna izquierda a ancho completo para centrar/alinear su contenido */
#page-login-index .signuppanel > .subcontent,
#page-login-index .signuppanel .login-detalles {
width: 100%;
}
/* "¿Tienes problemas para entrar?": sin caja, centrado; enlaces
subrayados en navy con icono en light blue */
#page-login-index .signuppanel .problemas {
background-color: transparent;
color: var(--navy-blue);
padding: 0;
width: 100%;
margin: 40px 0 0 0;
box-shadow: none;
text-align: center;
}
#page-login-index .signuppanel .problemas h4 {
font-size: 17px;
font-weight: 700;
color: var(--navy-blue);
}
#page-login-index .signuppanel .problemas ul#list-problemas {
padding-left: 0;
margin-bottom: 0;
}
#page-login-index .signuppanel .problemas ul li,
#page-login-index .signuppanel .problemas ul li.mail {
list-style-type: none;
margin-left: 0;
background: none;
padding: 3px 0;
}
/* Iconos de los enlaces en light blue (glyphs de Material Symbols):
engranaje para las asistencias y sobre para el email */
#page-login-index .signuppanel .problemas ul#list-problemas li::before {
content: "settings";
font-family: 'Material Symbols Outlined';
font-weight: 400;
color: var(--light-blue);
font-size: 18px;
line-height: 1;
vertical-align: middle;
margin-right: 6px;
}
#page-login-index .signuppanel .problemas ul#list-problemas li.mail::before {
content: "mail";
}
#page-login-index .signuppanel .problemas ul#list-problemas li a {
color: var(--navy-blue) !important;
text-decoration: underline;
}
#page-login-index .signuppanel .problemas ul#list-problemas li a:hover {
color: var(--light-blue) !important;
}
.signuppanel hr {
display: none;
}
.externalaccess {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: center;
justify-content: space-evenly;
gap: var(--spacing-large);
}
.externalaccess .ext_text p {
width: 75%;
text-align: center;
margin-bottom: 0px;
line-height: 21px;
}
.externalaccess .ext_text {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
gap: var(--spacing-large);
}
/* Sin la línea superior del footer en la página de login */
#page-login-index .second-page-footer {
border-top: none;
}
/* ============================================================
3. DASHBOARD PRINCIPAL
============================================================ */
/* Fondo crema de la Home (dashboard 1) */
#page-totara-dashboard-1 {
background-color: #faf4ee !important;
}
/* La Home de usuarios externos mantiene el fondo blanco de la Home interna. */
#page-totara-dashboard-6 {
background-color: #fff !important;
}
/* --- Slider principal --- */
.block_slickslider .elslide div.nolink {
margin: auto auto auto 0px;
max-height: 80% !important;
border-radius: 0px 20px 20px 0px !important;
padding-right: 50px;
background: none !important;
}
.block_slickslider {
margin-bottom: 50px !important;
}
.block_slickslider .elslide .conttext .titol {
font-weight: 400 !important;
}
.block_slickslider .conttext .text {
color: #ffffffdc;
font-weight: normal;
font-size: 0.9em;
}
/* Caja de texto más ancha (títulos en menos líneas); el título rompe
línea al final de "…Campus" (ajustar el 18em si cambia el texto) */
@media (min-width: 768px) {
.block_slickslider .elslide div.nolink {
width: 60% !important;
max-width: 60% !important;
}
.block_slickslider .elslide .conttext .titol {
max-width: 18em;
margin-bottom: 0;
}
}
/* Fuera los
vacíos del bloque (metían 30px de margen que
descolgaba el subtítulo) */
.block_slickslider .conttext .text p:empty { display: none; }
/* Subtítulo equidistante entre título y botón */
.block_slickslider .conttext .text > div {
margin: 14px 0;
}
/* Botón del slider: negrita y separado del subtítulo */
.block_slickslider .conttext .ivi-btn {
font-weight: 700;
margin-top: 24px;
}
/* .vimeo-trigger-btn ya NO se estiliza aquí: queda solo como gancho del
popup. Su aspecto lo da el sistema de botones (.ivi-btn, sección 27). */
.hero-principal .btn-banner {
padding: 12px 25px;
background-color: white;
border-radius: 25px;
color: var(--color-secondary);
font-size: 16px;
font-weight: 500;
border: 1.5px solid white;
transition: background-color 0.3s ease-in, transform 0.3s ease-in;
}
.hero-principal .btn-banner:hover {
color: white;
background-color: #ffffff40 !important;
transform: scale(1.03);
}
/* --- Hero: al ancho del contenido (decisión 2026-07-13) ---
Antes hacía breakout a 100vw; ahora queda alineado con el resto
de la página, con aire arriba y abajo. El prefijo html suma
especificidad para ganar al fullscreen.css del tema. */
html .has-full-page-slider #block-region-top .block_slickslider.fullwidth-slider {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
}
/* Aire sobre el hero (padding en la región: los márgenes del bloque
los pisa el fullscreen.css del plugin) */
html .has-full-page-slider #block-region-top {
padding-top: 20px !important;
}
/* Sin padding lateral: el slider apura la columna, alineado con los
bloques de abajo (verificado 2026-07-14) */
#block-region-top #inst11487.block_slickslider {
padding: 1.5rem 0;
}
/* Espacio bajo el slider del hero (la regla general pone 50px) */
#block-region-top .block_slickslider {
margin-bottom: 20px !important;
}
.block_slickslider .conttext {
padding-left: 5em;
}
/* Texto del hero: margen fijo (ya sin cálculo sobre el viewport) */
.has-full-page-slider #inst223.fullwidth-slider .conttext {
padding-left: 70px !important;
padding-right: 20px;
}
/* --- Banner "Learning for Excellence" (Home): degradado de marca LFE
(navy→violeta→magenta→rosa, 4 paradas) + tarjeta crema con el curso
destacado. El botón usa el sistema .ivi-btn (ver HTML). --- */
.cta_lfe .content.block-content {
background: linear-gradient(90deg,
#0F0E65 0%,
#5B2C9E 44%,
#7A2494 65%,
#B2407E 89%) !important;
color: #fff !important;
padding: 20px 26px !important;
border-radius: var(--border-radius-large);
}
.cta_lfe .no-overflow {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-large);
}
.cta_lfe .no-overflow .izq {
display: flex;
align-items: center;
gap: var(--spacing-medium);
margin-left: var(--spacing-small);
flex: 0 1 auto;
}
/* Badge circular del logo LFE (el SVG trae su propio fondo) */
.cta_lfe .no-overflow .izq img {
width: 110px !important;
object-fit: contain;
border-radius: 50%;
flex: 0 0 auto;
}
.cta_lfe .no-overflow .izq h3 {
font-family: var(--font-title) !important;
font-size: 26px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #fff !important;
margin: 0 !important;
}
.cta_lfe .no-overflow .izq h3 b { font-weight: 700 !important; }
/* Tarjeta crema con el curso destacado y el botón (≈52% del banner) */
.cta_lfe .no-overflow .dcha {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-large);
flex: 0 0 52%;
background: var(--warm-gray);
padding: 14px 16px 14px 24px;
border-radius: var(--border-radius);
text-align: left;
box-shadow: 0 4px 14px rgba(8, 0, 79, 0.12);
}
.cta_lfe .no-overflow .dcha p {
margin: 0;
line-height: 1.35;
}
.cta_lfe .no-overflow .dcha .lfe-banner-titulo {
font-family: var(--font-body);
font-weight: 700;
font-size: 17px;
color: var(--navy-blue);
}
.cta_lfe .no-overflow .dcha .lfe-banner-tipo,
.cta_lfe .no-overflow .dcha .lfe-banner-tipo b {
font-weight: 400;
font-size: 15px;
color: var(--text-gray);
}
/* Responsive: apilar en móvil */
@media (max-width: 767px) {
.cta_lfe .no-overflow,
.cta_lfe .no-overflow .dcha {
flex-direction: column;
text-align: center;
}
.cta_lfe .no-overflow .izq { margin-left: 0; }
.cta_lfe .no-overflow .dcha { padding: 18px; }
}
/* --- Ocultar dropdown del bloque current_learning --- */
#inst211.block_current_learningas .statusselector.dropdown,
#inst212.block_current_learningas .statusselector.dropdown,
#inst218.block_current_learningas .statusselector.dropdown,
#inst226.block_current_learningas .statusselector.dropdown,
#inst233.block_current_learningas .statusselector.dropdown,
#inst352.block_current_learningas .statusselector.dropdown {
display: none !important;
}
/* --- Bloques one-tech-launch --- */
#inst9929.one-tech-launch .content.block-content,
#inst10654.one-tech-launch .content.block-content{
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/One-Tech-IVI-Institute-Campus-banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align:center;
padding:2em 1em!important;
}
#inst9929.one-tech-launch .content.block-content a,
#inst10654.one-tech-launch .content.block-content a{
padding: 12px 25px;
background-color: white;
border-radius: 25px;
color: var(--color-secondary);
font-size: 15px;
font-weight: 500;
border: 1.5px solid white;
transition: background-color 0.3s ease-in, transform 0.3s ease-in;
margin-top:20px!important;
}
#inst9929.one-tech-launch .content.block-content a:hover,
#inst10654.one-tech-launch .content.block-content a:hover {
color: white!important;
background-color: #ffffff40 !important;
transform: scale(1.03);
}
#inst9929.one-tech-launch .content.block-content img,
#inst10654.one-tech-launch .content.block-content img {
margin-bottom:20px!important;
}
#inst9929 .no-overflow,
#inst10654 .no-overflow{
overflow: hidden !important;
padding: 10px;
}
/* --- Responsive de botones de calificaciones --- */
@media (min-width: 768px) {
/* Bloques-informe del sidebar (Cursos que imparto, Finalización,
Tracking): enlaces navy en negrita (rediseño 2026-07-13; antes
eran botones naranjas con texto blanco) */
#inst8620 .content a,
#inst9006 .content a,
#inst9120 .content a,
#inst10987 .content a {
color: var(--navy-blue) !important;
font-weight: 700;
}
}
/* --- Ajustes finales de gráficas e informes de administración --- */
#page-totara-dashboard-2 .rb-chartjs__chart,
#page-totara-dashboard-3 .rb-chartjs__chart,
#page-totara-dashboard-4 .rb-chartjs__chart,
#page-totara-dashboard-22 .rb-chartjs__chart,
#page-totara-dashboard-23 .rb-chartjs__chart,
#page-totara-dashboard-26 .rb-chartjs__chart,
#page-totara-dashboard-15 .rb-chartjs__chart,
#page-totara-dashboard-2 .rb-chartjs__chart__canvas,
#page-totara-dashboard-3 .rb-chartjs__chart__canvas,
#page-totara-dashboard-4 .rb-chartjs__chart__canvas,
#page-totara-dashboard-22 .rb-chartjs__chart__canvas,
#page-totara-dashboard-23 .rb-chartjs__chart__canvas,
#page-totara-dashboard-26 .rb-chartjs__chart__canvas,
#page-totara-dashboard-15 .rb-chartjs__chart__canvas {
height: 400px !important;
max-height: 400px !important;
}
/* Barras al doble de alto: SOLO las gráficas de barras horizontales
(seguimiento de cursos, muchas filas), detectadas por el tipo real
en data-report-options. Las de líneas ("Accesos por mes") se quedan
a 400px. Independiente de inst-id / idioma / región. */
#page-totara-dashboard-2 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-2 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-3 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-3 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-4 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-4 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-22 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-22 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-23 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-23 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-26 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-26 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-15 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-15 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'] {
height: 800px !important;
max-height: 800px !important;
}
/* Área de la gráfica como tarjeta blanca (canvas + "Ver informe
completo"). Los divs internos siguen transparentes (§29) y muestran
este blanco; el título del bloque queda encima, sobre el crema. */
#page-totara-dashboard-2 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-3 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-4 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-22 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-23 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-26 #page-content .block_totara_report_graph .content.block-content {
padding: 24px !important;
background: #fff !important;
border-radius: 14px !important;
box-shadow: var(--shadow-soft) !important;
}
#page-totara-dashboard-2 .block_totara_report_graph .footer,
#page-totara-dashboard-3 .block_totara_report_graph .footer,
#page-totara-dashboard-4 .block_totara_report_graph .footer,
#page-totara-dashboard-22 .block_totara_report_graph .footer,
#page-totara-dashboard-23 .block_totara_report_graph .footer,
#page-totara-dashboard-26 .block_totara_report_graph .footer {
margin-top: 16px;
}
.ivi-report-footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.ivi-report-footer .ivi-full-report-btn {
background: #fff !important;
border-color: #fff !important;
color: var(--light-blue, #004df0) !important;
}
.ivi-report-footer .ivi-full-report-btn:hover,
.ivi-report-footer .ivi-full-report-btn:focus {
background: var(--light-blue, #004df0) !important;
border-color: var(--light-blue, #004df0) !important;
color: #fff !important;
}
/* --- Mosaicos de informes destacados y LFE --- */
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout {
row-gap: 28px !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) {
justify-content: flex-start !important;
margin-bottom: 40px !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small {
flex-grow: 0 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler {
display: none !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 68px !important;
min-height: 68px !important;
max-height: 68px !important;
padding: 8px 12px !important;
background: transparent !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before {
background: transparent !important;
opacity: 0 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3 {
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-size: 14px !important;
line-height: 1.2 !important;
text-align: center !important;
}
/* Tarjetas grandes: franja blanca translúcida, compacta y uniforme. */
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
padding: 10px 18px !important;
background: transparent !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before {
background: rgba(255, 255, 255, 0.78) !important;
opacity: 1 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3 {
position: relative;
z-index: 1;
margin: 0 !important;
padding: 0 !important;
color: var(--navy-blue, #08004f) !important;
line-height: 1.25 !important;
text-align: center !important;
}
/* La tarjeta recorta su imagen; al abrir la rueda se libera el recorte
para que el menú de edición pueda desplegarse con margen. */
.block_totara_featured_links .block-totara-featured-links-tile:has([aria-expanded="true"]),
.block_totara_featured_links .block-totara-featured-links-tile:has(.open),
.block_totara_featured_links .block-totara-featured-links-tile:has(.show) {
position: relative !important;
overflow: visible !important;
z-index: 50 !important;
}
.block_totara_featured_links .block-totara-featured-links-tile:has([aria-expanded="true"]) [role="menu"],
.block_totara_featured_links .block-totara-featured-links-tile:has(.open) [role="menu"],
.block_totara_featured_links .block-totara-featured-links-tile:has(.show) [role="menu"] {
z-index: 51 !important;
}
@media (max-width: 767px) {
#page-totara-dashboard-2 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-3 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-4 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-22 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-23 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-26 #page-content .block_totara_report_graph .content.block-content {
padding: 16px !important;
}
.ivi-report-footer .ivi-full-report-btn {
width: 100%;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom {
height: 72px !important;
min-height: 72px !important;
max-height: 72px !important;
padding: 8px 14px !important;
}
}
/* ============================================================
4. DASHBOARD LFE
============================================================ */
/* Fondo warm gray de las páginas LFE: dashboard 10 (LFE), 11 (Monthly
Seminars), 12 (Must-Read), 27 (Visor de puntos LFE 2025) y edición
de certificados (mod/data) */
#page-totara-dashboard-10,
#page-totara-dashboard-11,
#page-totara-dashboard-12,
#page-totara-dashboard-27,
#page-mod-data-edit {
background-color: var(--warm-gray, #faf4ee) !important;
}
/* Espaciado de bloques de la columna lateral en Monthly: visor
(#inst295) y botón "Volver a mi LFE" (#inst351) */
#inst295 .content.block-content {
padding-top: 10px !important;
}
#inst295,
#inst351 {
margin-top: 16px !important;
margin-bottom: 15px !important;
}
/* --- Slider LFE --- */
.block_slickslider.lfe_hero .elslide div.nolink,
.block_slickslider.lfe_hero .elslide div.nolink .conttext {
width: 100% !important;
margin: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext h2,
.block_slickslider.lfe_hero h4.lfe-banner-tipo {
color: white !important;
text-align: center !important;
font-family: "IVI Glance", "Noto Sans" !important;
font-size: 2em !important;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext .text h2 {
margin-top: var(--spacing-small) !important;
font-weight: bold;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext .slick-slide .lfe-white {
display: flex !important;
padding-bottom: var(--spacing-xl) !important;
margin: auto !important;
}
/* --- Hero LFE (rebranding): el degradado rosa→morado y el círculo
blanco del logo van INCRUSTADOS en la imagen de fondo que sube
Beatriz (decisión 2026-07-14); el CSS ya no los pinta. El .nolink
queda como capa transparente que centra el texto sobre la foto. */
/* Contenedor del slide posicionado para anclar la capa absoluta */
.block_slickslider.lfe_hero .slick-slide,
.block_slickslider.lfe_hero .slick-slide > .elslide {
position: relative !important;
}
.block_slickslider.lfe_hero .elslide .nolink {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
justify-content: center !important;
border-radius: 20px !important;
padding: 2.5em 1em !important;
background: none !important;
}
/* Logo LFE: solo tamaño y centrado (sin círculo blanco) */
.block_slickslider.lfe_hero .conttext .text img {
width: 160px !important;
height: 160px !important;
object-fit: contain;
margin: 0 auto 0px !important;
}
/* Título grande y "tipo" (Ginecología) más pequeño */
.block_slickslider.lfe_hero .conttext .text h2.lfe-banner-titulo {
font-size: 2.6em !important;
font-weight: 700 !important;
line-height: 1.12 !important;
margin: 0 !important;
}
.block_slickslider.lfe_hero h4.lfe-banner-tipo {
font-size: 1.35em !important;
font-weight: 400 !important;
margin-top: 6px !important;
opacity: 0.96;
}
/* --- Visor box (rebranding): tarjeta blanca a 10px con badge
centrado; "puntuación actual" en navy y hover de elevación de la
tarjeta. El título "Visor de puntos LFE" va en IVI Glance dentro de
la card (Monthly); el botón "Volver a mi LFE" (.ivi-btn) queda bajo
la tarjeta. --- */
.visor-box .no-overflow {
padding: 0 !important;
}
.visor-box a.btn.lfe {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
background-color: #ffffff;
border-radius: 10px;
padding: 1.5em 1.25em;
text-align: center;
color: var(--text-gray);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.visor-box a.btn.lfe:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.12);
text-decoration: none;
}
.visor-box a.btn.lfe b {
color: var(--navy-blue) !important;
}
.visor-box a.btn.lfe img {
margin-bottom: 0;
}
.visor-box a.btn.lfe img:hover {
opacity: 1 !important;
}
.visor-box a.btn.lfe .lfe-visor-title {
font-family: var(--font-title) !important;
color: var(--navy-blue) !important;
font-weight: 400 !important;
font-size: 1.35em;
text-align: center;
margin: 0;
}
.visor-box .ivi-btn {
margin-top: 12px;
}
/* --- .no-obligatorio: aviso salmón con icono Material naranja
(relleno) en vez de info_orange.svg; el gap sustituye al
margin-right del ![]()
retirado. --- */
.no-obligatorio {
display: flex;
align-items: flex-start;
gap: 16px;
background: #FFF0EE70 !important;
/* Aire bajo el texto (antes 5px) + borde naranja de marca */
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-small);
border: 1.5px solid var(--bright-orange);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-large);
font-size: 1.1em;
}
.no-obligatorio .izq .material-symbols-outlined {
font-size: 26px;
color: var(--bright-orange);
font-variation-settings: 'FILL' 1;
}
.no-obligatorio b {
color: var(--orange);
}
/* --- Presentación LFE (#inst209 .preslfe): dos tarjetas blancas —
bienvenida (izq) y card de la presentación (dcha, clicable vía JS
del tema) con panel azul claro para la ilustración. --- */
.preslfe .content.block-content {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.preslfe .content.block-content .no-overflow {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 24px;
overflow: visible !important;
}
.preslfe .content.block-content .no-overflow .preslfe-izq {
width: calc(60% - 12px) !important;
padding: 2em 4em !important;
background: #ffffff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.preslfe .content.block-content .no-overflow .preslfe-izq h3 {
font-family: var(--font-title) !important;
color: var(--navy-blue) !important;
font-weight: 400 !important;
font-size: 2em;
margin: 0 0 1em;
}
.preslfe .content.block-content .no-overflow .preslfe-izq p {
margin: 0 0 0.9em;
}
.preslfe .content.block-content .no-overflow .preslfe-izq p:last-child {
margin-bottom: 0;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha {
width: calc(40% - 12px) !important;
background-color: #ffffff;
border-radius: 10px;
padding: 1.25em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 18px;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.12);
}
/* Panel azul claro con la ilustración */
.preslfe .content.block-content .no-overflow .preslfe-ilus {
width: 100%;
flex: 1;
background: var(--bg-blue);
border-radius: 10px;
padding: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha img {
width: 100%;
max-width: 260px;
height: auto;
margin-bottom: 0 !important;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha span {
color: var(--light-blue) !important;
font-weight: 700;
font-size: 1.05em;
text-align: center;
padding: 0 0.5em 0.35em;
}
@media (max-width: 767px) {
.preslfe .content.block-content .no-overflow {
flex-direction: column;
}
.preslfe .content.block-content .no-overflow .preslfe-izq,
.preslfe .content.block-content .no-overflow .preslfe-dcha {
width: 100% !important;
}
}
/* INFO SOBRE PUNTOS LFE — aviso azul claro de marca (con icono i) */
.info-puntos .content.block-content {
background: var(--bg-blue) !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 1.15em 1.5em !important;
}
.info-puntos .content.block-content .no-overflow {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.info-puntos .content.block-content .no-overflow .izq {
flex: 0 0 auto;
width: auto;
padding-top: 2px;
}
.info-puntos .content.block-content .no-overflow .dcha {
flex: 1;
width: auto;
padding-right: 0 !important;
color: var(--navy-blue);
line-height: 1.5;
}
.info-puntos .content.block-content .no-overflow .dcha b {
color: var(--navy-blue) !important;
}
/* Icono Material (info relleno) en vez del info.svg */
.info-puntos .izq .material-symbols-outlined {
font-size: 26px;
color: var(--light-blue);
font-variation-settings: 'FILL' 1;
}
/* Título de bloques chromeless: aire vertical uniforme */
.block.chromeless .title.block-title {
padding: 20px 0px !important;
}
/* Excepción: el bloque "Administración" (block_settings) lleva cabecera navy a
ancho completo → su título necesita sangría izquierda para no quedar pegado
al borde, alineado con el resto de bloques. Especificidad extra para ganar
a la regla de arriba. */
.block.chromeless.block_settings .title.block-title {
padding-left: 20px !important;
}
/* --- Títulos y bloques --- */
.title_lfe .title.block-title h2,
#inst789 .title.block-title h2,
#inst216 .title.block-title h2 {
font-family: "IVI Glance", "Noto Sans" !important;
font-weight: bold;
font-size: 26px !important;
}
.title_lfe .content.block-content {
background-color: var(--color-gray-light) !important;
box-shadow: none !important;
padding: 0 !important;
}
/* --- #inst682, #inst7832, #inst352 current_learning dropdowns hidden --- */
#inst682.block_current_learningas #current_learningas .statusselector.dropdown,
#inst7832.block_current_learningas,
#inst352.block_current_learningas #current_learningas .statusselector.dropdown {
display: none !important;
}
/* --- .etiqueta-obligatorio: pastilla rosa del diseño 2026-07-13
(antes cinta coral pegada al borde) --- */
.etiqueta-obligatorio {
position: absolute;
z-index: 99;
background-color: var(--bright-red);
color: #fff;
padding: 5px 12px;
border-radius: 999px;
top: 12px;
left: 12px;
font-size: 12px;
font-weight: 600;
}
/* Cards de curso (current_learning): título sin recorte de
descendentes y barra de progreso en el naranja nuevo */
.block_current_learningas .block_current_learningas-tile__link_title {
line-height: 1.35 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.block_current_learningas .progressbar_container .progress .bar {
background: var(--bright-orange) !important;
}
/* --- Cards de curso Monthly Seminars (#inst287) ---
Imagen: la altura la fija el ::before con padding-top (el % se
calcula sobre el ancho, así siempre da altura; con aspect-ratio en
el div de la foto se colapsaba a 0 por no tener contenido). La foto
encaja al ancho y la ventana mide justo su alto → sin blanco arriba
ni abajo. Título sin line-clamp y etiqueta de vencimiento en rojo. */
#inst287 .block_current_learningas-tile__image,
#inst287 #current_learningas .block_current_learningas-tile__image {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
#inst287 .block_current_learningas-tile__image_ratio,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio {
position: relative !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Proporción del banner: padding-top = 100 / ratio. 38.2% ≈ 2.62:1.
Franja blanca abajo → subir el %; recorte por abajo → bajarlo. */
#inst287 .block_current_learningas-tile__image_ratio::before,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio::before {
content: "" !important;
display: block !important;
width: 100% !important;
padding-top: 38.2% !important;
}
#inst287 .block_current_learningas-tile__image_ratio_img,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio_img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: 100% auto !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
#inst287 .block_current_learningas-tile,
#inst287 .block_current_learningas-tile__content,
#inst287 .block_current_learningas-tile__link,
#inst287 .block_current_learningas-tile__maincontent,
#inst352 .block_current_learningas-tile,
#inst352 .block_current_learningas-tile__content,
#inst352 .block_current_learningas-tile__link,
#inst352 .block_current_learningas-tile__maincontent {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
#inst287 .block_current_learningas-tile__content_duedate,
#inst287 .block_current_learningas-tile__content,
#inst352 .block_current_learningas-tile__content_duedate,
#inst352 .block_current_learningas-tile__content {
position: static !important;
}
#inst287 .block_current_learningas-tile__link_title,
#inst287 #current_learningas .block_current_learningas-tile__link_title,
#inst352 .block_current_learningas-tile__link_title,
#inst352 #current_learningas .block_current_learningas-tile__link_title {
display: block !important;
-webkit-line-clamp: none !important;
line-clamp: none !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* Monthly (#inst287): badge de vencimiento rojo. Externos (#inst352) YA NO
lleva estilo de vencimiento: usa el badge de "Fecha de inscripción"
(.home-due-badge, §30), igual que la home de internos. Por eso se quitó
#inst352 de estas reglas (su especificidad de id + !important tapaba el navy
de .home-due-badge, incluido el icono ::before). */
#inst287 .block_current_learningas-tile__content_duedate_text,
#inst287 #current_learningas .block_current_learningas-tile__content_duedate_text {
background: var(--red) !important;
color: #ffffff !important;
font-weight: 700 !important;
border: none !important;
}
#page-totara-dashboard-6 #inst352 li.block_current_learningas-tile,
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__maincontent {
display: flex !important;
flex-direction: column !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__image {
flex: 0 0 auto !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__maincontent {
flex: 1 1 auto !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__content_duedate {
margin-top: auto !important;
}
/* --- Puntos de excelencia (#inst216, Formación de Excelencia): banda
del título/subtítulo de cada card con su color de marca translúcido
y letra blanca (tile 1 Must Read #AC1D6B 80%, tile 2 Monthly #7B2594
80%, tile 3 Asistencia #622A9C 90%). Sin velo blanco del tema
(::before) ni backdrop-filter. --- */
#inst216 .block-totara-featured-links-tile .block-totara-featured-links-content-container {
background: none;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content {
width: 100%;
padding: 12px 16px 14px;
margin-bottom: -5px;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0) !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content h3,
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content p {
color: #ffffff !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content h3 {
padding: 5px !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content p {
margin-bottom: var(--spacing-small) !important;
font-size: 13px;
}
#inst216 .block-totara-featured-links-tile-1 .block-totara-featured-links-content {
background: rgba(172, 29, 107, 0.8);
}
#inst216 .block-totara-featured-links-tile-2 .block-totara-featured-links-content {
background: rgba(123, 37, 148, 0.8);
}
#inst216 .block-totara-featured-links-tile-3 .block-totara-featured-links-content {
background: rgba(98, 42, 156, 0.9);
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover {
flex-basis: auto;
width: 30% !important;
max-height: 230px;
background-size: cover;
margin-top: -15px;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover:hover {
opacity: 0.8 !important;
}
/* --- CTA catálogo LFE (rebranding): banner degradado azul→teal --- */
.cta-catalog .content.block-content {
background: linear-gradient(100deg,
var(--light-blue) 0%, #1E7FE0 48%, var(--teal) 100%) !important;
border-radius: 10px !important;
color: #ffffff !important;
padding: 2em 2.5em !important;
box-shadow: none !important;
}
.cta-catalog .no-overflow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-catalog .izq .title {
font-family: var(--font-title);
font-size: 1.7em;
font-weight: 600;
color: #ffffff;
margin: 0 0 6px;
}
.cta-catalog .izq p {
margin: 0;
color: rgba(255, 255, 255, 0.92);
}
.cta-catalog .btn-dcha a {
display: inline-block;
background: #ffffff;
color: var(--light-blue);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.05em;
padding: 12px 26px;
border-radius: 8px;
white-space: nowrap;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.cta-catalog .btn-dcha a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.20);
color: var(--blue-hover);
text-decoration: none;
}
/* --- Customizaciones LFE (#inst286 - Formación LFE, .bloque-codigo) --- */
#inst286 {
margin-bottom: 25px;
}
#inst286 thead {
display: none;
}
#inst286 tbody {
display: flex;
flex-direction: row;
gap: var(--gap-4);
flex-wrap: wrap;
align-items: stretch;
}
#inst286 tr {
display: flex;
flex-direction: column;
width: calc(33% - 0.8rem);
border-radius: var(--block-radius);
border: var(--block-border);
box-shadow: var(--block-shadow);
background: var(--block-background-color);
position: relative;
}
#inst286 tr:hover {
box-shadow: var(--shadow-2);
}
#inst286 table.flexible > tbody > tr > td {
border-top: 0px;
}
#inst286 .course_custom_field_10 {
padding: 0px;
height: 152px;
background-image: url(https://isdin-ld.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/course_defaultimage.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-top-right-radius: var(--border-radius-large);
border-top-left-radius: var(--border-radius-large);
}
#inst286 .course_custom_field_10 img {
height: 100%;
width: 100%;
object-fit: cover;
max-width: 100%;
object-position: center;
border-top-left-radius: var(--border-radius-large);
border-top-right-radius: var(--border-radius-large);
}
#inst286 .no-overflow {
overflow: visible;
padding-bottom: 0px;
}
#inst286 .footer a {
display: none;
}
#inst286 .course_completion_duedate {
position: absolute;
top: 105px;
background: #fff;
font-size: 14px;
font-weight: 600;
left: var(--spacing-medium);
}
/* Textos multiidioma para fechas */
.lang-es #inst286 .course_completion_duedate:before {
content: 'Fecha límite:';
}
.lang-en #inst286 .course_completion_duedate:before {
content: 'Due date:';
}
.lang-de #inst286 .course_completion_duedate:before {
content: 'Fälligkeitsdatum:';
}
.lang-fr #inst286 .course_completion_duedate:before {
content: "Date d'échéance:";
}
.lang-it #inst286 .course_completion_duedate:before {
content: 'Data di scadenza:';
}
.lang-zh_cn #inst286 .course_completion_duedate:before {
content: '截止日期:';
}
#inst286 .course_custom_field_2 {
padding: 16px 16px 0px 16px;
text-transform: uppercase;
font-size: 14px;
color: #2A4C59;
font-weight: 600;
}
#inst286 .course_courselink {
padding: 3px 16px 0px;
font-size: 16px;
color: #2a4c59;
font-weight: 600;
}
#inst286 .course_completion_progresspercent {
padding: 16px;
}
#inst286 .totara-table-container .totara-toolbar-top {
display: none;
}
div#region-main #inst286.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
.bloque-codigo {
display: none !important;
}
/* --- Visor de puntos --- */
.visor .fo-completa {
padding: 0.5em 1em;
background-color: #85C99C;
font-weight: bold;
color: white !important;
width: fit-content;
border-radius: 8px;
}
.visor .fo-incompleta {
padding: 0.5em 1em;
background-color: #7A2840;
font-weight: bold;
color: white !important;
width: fit-content;
border-radius: 8px;
}
.title_lfe.visor {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Etiqueta "Puntuación:" + badge en línea y centrados verticalmente */
.title_lfe.visor .lfe-puntuacion {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* El marcador (0/1500) como pastilla tipo "COMPLETA" (verde pastel + punto),
para combinar con los badges de Formación Obligatoria. */
.title_lfe.visor .lfe-visor-puntuacion {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 5px 13px !important;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.5;
margin-left: 0;
background-color: #D6F6EF !important;
color: #00514A !important;
}
/* Punto de color a la izquierda del marcador (como en los badges) */
.title_lfe.visor .lfe-visor-puntuacion::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* --- Bloques de contenido LFE (#inst277-#inst281, #inst9478-#inst9482) --- */
#inst278 thead,
#inst9479 thead,
#inst9480 thead,
#inst9481 thead,
#inst9482 thead,
#inst279 thead,
#inst281 thead,
#inst280 thead {
display: none;
}
#inst277 .footer a,
#inst9478 .footer a,
#inst278 .footer a,
#inst9479 .footer a,
#inst9480 .footer a,
#inst9481 .footer a,
#inst9482 .footer a,
#inst279 .footer a,
#inst280 .footer a,
#inst281 .footer a {
display: none;
}
#inst277 .alert-with-icon,
#inst9478 .alert-with-icon,
#inst278 .alert-with-icon,
#inst9479 .alert-with-icon,
#inst9480 .alert-with-icon,
#inst9481 .alert-with-icon,
#inst9482 .alert-with-icon,
#inst279 .alert-with-icon,
#inst281 .alert-with-icon {
display: none;
}
#inst277 tbody > tr:nth-of-type(odd),
#inst9478 tbody > tr:nth-of-type(odd) {
background-color: white !important;
}
div#region-main #inst277.block .content,
div#region-main #inst9478.block .content,
div#region-main #inst278.block .content,
div#region-main #inst9479.block .content,
div#region-main #inst9480.block .content,
div#region-main #inst9481.block .content,
div#region-main #inst9482.block .content,
div#region-main #inst279.block .content,
div#region-main #inst280.block .content,
div#region-main #inst281.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent;
}
div#region-main #inst277.block .content tbody,
div#region-main #inst9478.block .content tbody,
div#region-main #inst278.block .content tbody,
div#region-main #inst9479.block .content tbody,
div#region-main #inst9480.block .content tbody,
div#region-main #inst9481.block .content tbody,
div#region-main #inst9482.block .content tbody,
div#region-main #inst279.block .content tbody,
div#region-main #inst281.block .content tbody {
background-color: white !important;
}
div#region-main #inst277.block .content tbody td,
div#region-main #inst9478.block .content tbody td,
div#region-main #inst278.block .content tbody td,
div#region-main #inst9479.block .content tbody td,
div#region-main #inst9480.block .content tbody td,
div#region-main #inst9481.block .content tbody td,
div#region-main #inst9482.block .content tbody td,
div#region-main #inst279.block .content tbody td,
div#region-main #inst280.block .content tbody td,
div#region-main #inst281.block .content tbody td {
padding: 12px !important;
}
div#region-main #inst278.block .content tbody td.course_courselinkicon img,
div#region-main #inst9479.block .content tbody td.course_courselinkicon img,
div#region-main #inst9480.block .content tbody td.course_courselinkicon img,
div#region-main #inst9481.block .content tbody td.course_courselinkicon img,
div#region-main #inst9482.block .content tbody td.course_courselinkicon img,
div#region-main #inst279.block .content tbody td.course_courselinkicon img,
div#region-main #inst281.block .content tbody td.course_courselinkicon img {
margin-right: var(--spacing-small);
}
div#region-main #inst278.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9479.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9480.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9481.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9482.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst279.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst280.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst281.block .content tbody > tr:nth-of-type(odd) {
background-color: #fcfcfc !important;
}
div#region-main #inst277.block .content tbody td:last-child,
div#region-main #inst9478.block .content tbody td:last-child,
div#region-main #inst278.block .content tbody td:last-child,
div#region-main #inst9479.block .content tbody td:last-child,
div#region-main #inst9480.block .content tbody td:last-child,
div#region-main #inst9481.block .content tbody td:last-child,
div#region-main #inst9482.block .content tbody td:last-child,
div#region-main #inst279.block .content tbody td:last-child,
div#region-main #inst280.block .content tbody td:last-child {
text-align: center !important;
}
/* Colores de cabecera por sección (rebranding 2026-07-21: Monthly morado,
Must Read magenta, Certificados violeta, Catálogo navy) */
div#region-main #inst278 .header.block-header,
div#region-main #inst9479 .header.block-header{
background-color: #7B2594 !important;
}
div#region-main #inst279 .header.block-header,
div#region-main #inst9480 .header.block-header{
background-color: #AC1D6B !important;
}
div#region-main #inst280 .header.block-header,
div#region-main #inst9481 .header.block-header
{
background-color: #622A9C !important;
}
div#region-main #inst281 .header.block-header,
div#region-main #inst9482 .header.block-header{
background-color: var(--navy-blue, #08004F) !important;
}
div#region-main #inst278 .header.block-header h2,
div#region-main #inst9479 .header.block-header h2,
div#region-main #inst9480 .header.block-header h2,
div#region-main #inst9481 .header.block-header h2,
div#region-main #inst9482 .header.block-header h2,
div#region-main #inst279 .header.block-header h2,
div#region-main #inst280 .header.block-header h2,
div#region-main #inst281 .header.block-header h2 {
color: white;
padding: 0 var(--spacing-large);
}
div#region-main #inst278 .header.block-header h2::after,
div#region-main #inst9479 .header.block-header h2::after,
div#region-main #inst9480 .header.block-header h2::after,
div#region-main #inst9481 .header.block-header h2::after,
div#region-main #inst9482 .header.block-header h2::after,
div#region-main #inst279 .header.block-header h2::after,
div#region-main #inst280 .header.block-header h2::after,
div#region-main #inst281 .header.block-header h2::after {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/minus-circle.svg');
background-size: contain;
background-repeat: no-repeat;
margin-left: var(--spacing-medium);
vertical-align: middle;
}
/* --- Dashboard externos: carrusel de cursos recomendados (.externos) --- */
#page-totara-dashboard-6 .externos .content.block-content {
background: #fff !important;
border-radius: 0;
box-shadow: none !important;
padding: 1em 0 !important;
}
#page-totara-dashboard-6 .externos .carousel-container {
position: relative;
display: flex;
align-items: stretch;
width: 100% !important;
max-width: none !important;
margin: auto;
padding: 0 60px !important;
overflow: visible !important;
box-sizing: border-box !important;
background: #fff !important;
}
#page-totara-dashboard-6 .externos .carousel {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
padding: 14px 10px !important;
gap: 16px !important;
overflow-x: auto !important;
box-sizing: border-box !important;
scroll-behavior: unset;
scroll-padding: 10px !important;
}
#page-totara-dashboard-6 .externos .carousel::-webkit-scrollbar {
display: none;
}
#page-totara-dashboard-6 .externos .carousel-card {
display: flex;
flex: 0 0 90%;
flex-direction: column;
width: 90%;
min-width: 0;
max-width: 90%;
height: auto !important;
overflow: hidden;
box-sizing: border-box;
background: #fff !important;
border-radius: var(--spacing-small);
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
scroll-snap-align: start;
}
#page-totara-dashboard-6 .externos .carousel-card img {
width: 100% !important;
height: 140px !important;
margin: 0 !important;
object-fit: cover !important;
}
#page-totara-dashboard-6 .externos .carousel-card .atto_image_button_text-bottom.img-responsive {
max-width: 100% !important;
}
#page-totara-dashboard-6 .externos .card-content {
flex-grow: 1;
max-height: none !important;
padding: 14px !important;
}
#page-totara-dashboard-6 .externos .card-content h3 {
margin-bottom: var(--spacing-small);
color: var(--color-secondary-dark) !important;
font-size: 15px !important;
}
#page-totara-dashboard-6 .externos .card-content p {
color: var(--color-text-gray);
font-size: 14px;
}
#page-totara-dashboard-6 .externos .card-content .datos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: 8px 16px !important;
margin-top: var(--spacing-medium);
margin-right: 0 !important;
}
/* Iconos del HTML actual: Material Symbols en azul, sin los SVG legacy. */
#page-totara-dashboard-6 .externos .datos .material-symbols-outlined {
color: var(--light-blue, #004DF0) !important;
font-size: 19px !important;
line-height: 1 !important;
margin-right: 5px !important;
vertical-align: middle !important;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
#page-totara-dashboard-6 .externos .fecha-inicio::before,
#page-totara-dashboard-6 .externos .ecmecs::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
}
#page-totara-dashboard-6 .externos .card-footer {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
padding: var(--spacing-medium);
}
#page-totara-dashboard-6 .externos .matricula {
margin-top: var(--spacing-small);
}
#page-totara-dashboard-6 .externos .btn-info {
padding: 8px var(--spacing-medium);
border: none;
border-radius: 999px !important;
background: var(--light-blue);
color: #fff !important;
cursor: pointer;
}
#page-totara-dashboard-6 .externos .btn-info:hover,
#page-totara-dashboard-6 .externos .btn-info:focus {
background: var(--blue-hover, #0038C4) !important;
color: #fff !important;
}
/* Flechas centradas dentro de canaletas laterales de 60px. */
#page-totara-dashboard-6 .externos .carousel-btn {
position: absolute;
top: 50% !important;
z-index: 10;
width: 44px !important;
height: 44px !important;
padding: var(--spacing-small);
transform: translateY(-50%);
border: none;
border-radius: 50%;
background: #004DF080;
color: #fff;
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#page-totara-dashboard-6 .externos .carousel-btn:hover {
background: var(--light-blue);
}
#page-totara-dashboard-6 .externos .prev {
left: 8px !important;
}
#page-totara-dashboard-6 .externos .next {
right: 8px !important;
}
/* Tablet: tres tarjetas completas. */
@media (min-width: 768px) and (max-width: 1199px) {
#page-totara-dashboard-6 .externos .carousel-card {
flex: 0 0 calc((100% - 32px) / 3) !important;
width: calc((100% - 32px) / 3) !important;
min-width: 0 !important;
max-width: calc((100% - 32px) / 3) !important;
}
}
/* Pantallas grandes: cuatro tarjetas completas y tres gaps de 16px. */
@media (min-width: 1200px) {
#page-totara-dashboard-6 .externos .carousel-card {
flex: 0 0 calc((100% - 48px) / 4) !important;
width: calc((100% - 48px) / 4) !important;
min-width: 0 !important;
max-width: calc((100% - 48px) / 4) !important;
}
}
/* ============================================================
5. DASHBOARD EXPEDIENTE — #page-totara-dashboard-16
============================================================ */
#page-totara-dashboard-16 .block-region {
padding: 0 2em;
}
#page-totara-dashboard-16 .totara-toolbar.totara-toolbar-top.clearfix {
display: none;
}
#inst8148 .footer a,
#inst8154 .footer a,
#inst8161 .footer a,
#inst8378 .footer a,
#inst11363 .footer a {
display: none;
}
#inst8148 thead tr th,
#inst8154 thead tr th,
#inst8378 thead tr th,
#inst11363 thead tr th {
background-color: #52b4bb;
color: white;
padding: 14px;
}
#inst8148 thead tr th.course_courselink,
#inst8154 thead tr th.course_courselink,
#inst8378 thead tr th.evidence_custom_field_1,
#inst11363 thead tr th.course_courselink {
border-top-left-radius: var(--border-radius);
}
#inst8154 thead tr th.course_completion_status,
#inst8148 thead tr th.c5,
#inst8378 thead tr th:last-child,
#inst11363 thead tr th:last-child {
border-top-right-radius: var(--border-radius);
}
.tenant-user-ext #inst8148 .course_category_name,
.tenant-user-ext #inst8154 .course_category_name,
.tenant-user-ext #inst11363 .course_category_name {
display: none;
}
#inst8148 thead a,
#inst8154 thead a,
#inst8378 thead a,
#inst11363 thead a {
color: white !important;
}
div#region-main #inst8148.block .content tbody td,
#inst8154.block .content tbody td,
#inst8378.block .content tbody td {
padding: 14px !important;
}
h2#instance-8378-header {
font-weight: 300 !important;
font-size: 1.2em;
}
/* ============================================================
6. DASHBOARD PNTs — #page-totara-dashboard-33
============================================================ */
/* --- Informe PNTs Globales (inst10607 / inst11103 / inst11136) --- */
#page-totara-dashboard-33 #inst10607 table.totaratable,
#page-totara-dashboard-33 #inst11103 table.totaratable,
#page-totara-dashboard-33 #inst11136 table.totaratable {
display: block !important;
width: 100% !important;
border-collapse: unset !important;
border-spacing: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tbody,
#page-totara-dashboard-33 #inst11103 table.totaratable tbody,
#page-totara-dashboard-33 #inst11136 table.totaratable tbody {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
padding: 20px !important;
box-sizing: border-box !important;
width: 100% !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tr,
#page-totara-dashboard-33 #inst11103 table.totaratable tr,
#page-totara-dashboard-33 #inst11136 table.totaratable tr {
display: block !important;
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
border: 1px solid #e5e7eb !important;
transition: box-shadow 0.2s ease !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tr:hover,
#page-totara-dashboard-33 #inst11103 table.totaratable tr:hover,
#page-totara-dashboard-33 #inst11136 table.totaratable tr:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
cursor: pointer !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 {
display: block !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 500 !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0::before,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0::before,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0::before {
content: '' !important;
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background: url('https://ivirmacampus.com/pluginfile.php/1/course/defaultcourseimage/2545/microscopio-lwfi7vnuibs.jpg') center / cover no-repeat !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td .course_icon,
#page-totara-dashboard-33 #inst11103 table.totaratable td .course_icon,
#page-totara-dashboard-33 #inst11136 table.totaratable td .course_icon {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a::before,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a::before,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a::before {
content: 'CURSO' !important;
display: block !important;
font-size: 11px !important;
font-weight: bold !important;
color: var(--color-primary) !important;
letter-spacing: 0.05em !important;
margin-bottom: 4px !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a {
display: block !important;
padding: 12px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--navy-blue) !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a:hover,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a:hover,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a:hover {
text-decoration: underline !important;
color: var(--light-blue) !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0::after,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0::after,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0::after {
content: '' !important;
display: block !important;
height: 4px !important;
background: #e5e7eb !important;
margin: 4px 12px 12px !important;
border-radius: 4px !important;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container,
#page-totara-dashboard-33 #inst11103 .totara-table-container,
#page-totara-dashboard-33 #inst11136 .totara-table-container {
display: block !important;
margin-top: 12px;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst11103 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst11136 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst10607 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst11103 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst11136 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst10607 .totara-table-container .paging,
#page-totara-dashboard-33 #inst11103 .totara-table-container .paging,
#page-totara-dashboard-33 #inst11136 .totara-table-container .paging {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container table.totaratable,
#page-totara-dashboard-33 #inst11103 .totara-table-container table.totaratable,
#page-totara-dashboard-33 #inst11136 .totara-table-container table.totaratable {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .rb-report-svggraph,
#page-totara-dashboard-33 #inst11103 .rb-report-svggraph,
#page-totara-dashboard-33 #inst11136 .rb-report-svggraph {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .pnts-filter-bar,
#page-totara-dashboard-33 #inst11103 .pnts-filter-bar,
#page-totara-dashboard-33 #inst11136 .pnts-filter-bar {
padding: 12px 15px;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
background: transparent !important;
background-color: transparent !important;
border-bottom: 0 !important;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li {
padding: 0;
margin: 0;
float: none;
}
/* Selectores (filtros) con estilo de botón azul light */
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li a,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li a,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li a {
display: inline-block;
margin: 0;
padding: 8px 18px;
border: 1.5px solid var(--light-blue, #004DF0);
border-radius: 999px;
background: transparent;
color: var(--light-blue, #004DF0) !important;
font-weight: 600;
transition: all 0.15s ease;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li a:hover,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li a:hover,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li a:hover {
background: var(--light-blue, #004DF0);
color: #ffffff !important;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li.active a,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li.active a,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li.active a {
background: var(--light-blue, #004DF0);
border-color: var(--light-blue, #004DF0);
color: #ffffff !important;
border-radius: 999px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tiles-wrap,
#page-totara-dashboard-33 #inst11103 .pnts-tiles-wrap,
#page-totara-dashboard-33 #inst11136 .pnts-tiles-wrap {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px;
align-items: stretch;
grid-auto-flow: row dense;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile,
#page-totara-dashboard-33 #inst11103 .pnts-tile,
#page-totara-dashboard-33 #inst11136 .pnts-tile {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-2);
transition: box-shadow 0.2s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile:hover,
#page-totara-dashboard-33 #inst11103 .pnts-tile:hover,
#page-totara-dashboard-33 #inst11136 .pnts-tile:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
cursor: pointer;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__img,
#page-totara-dashboard-33 #inst11103 .pnts-tile__img,
#page-totara-dashboard-33 #inst11136 .pnts-tile__img {
width: 100%;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
max-height: 180px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__body,
#page-totara-dashboard-33 #inst11103 .pnts-tile__body,
#page-totara-dashboard-33 #inst11136 .pnts-tile__body {
padding: 20px 20px 40px;
flex: 1;
display: flex;
flex-direction: column;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__type,
#page-totara-dashboard-33 #inst11103 .pnts-tile__type,
#page-totara-dashboard-33 #inst11136 .pnts-tile__type {
display: block;
font-size: 11px;
font-weight: bold;
color: var(--text-gray, #8A8A9E);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__title,
#page-totara-dashboard-33 #inst11103 .pnts-tile__title,
#page-totara-dashboard-33 #inst11136 .pnts-tile__title {
font-size: var(--font-size-16);
font-weight: bold;
color: var(--navy-blue);
line-height: 1.4;
margin: 0 0 10px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
font-size: 12px;
font-weight: 700;
color: #ffffff;
padding: 6px 10px;
border-radius: 999px;
text-transform: none;
line-height: 1;
letter-spacing: 0.01em;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--success,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--success,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--success {
background: var(--teal, #0CE3C6);
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--warning,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--warning,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--warning {
background: #F5A623;
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--orange,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--orange,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--orange {
background: var(--bright-orange, #FC814C);
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--danger,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--danger,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--danger {
background: var(--orange, #E9482A);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--completed,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--completed,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--completed {
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1.5px solid var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--completed i,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--completed i,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--completed i {
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip {
font-weight: 400;
position: absolute;
line-height: 1.5rem;
top: calc(100% + 3px);
left: 0;
min-width: 300px;
max-width: 450px;
background: #ffffffe6;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 5px;
padding: 5px 15px 10px 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
z-index: 3;
pointer-events: none;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge:hover .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge:hover .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge:hover .pnts-badge-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__title,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__title,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__title {
font-size: 12px;
font-weight: 700;
margin-bottom: 6px;
color: #111827;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__item,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__item,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #374151;
margin-top: 4px;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--success,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--success,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--success { background: var(--teal, #0CE3C6); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--warning,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--warning,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--warning { background: #F5A623; }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--orange,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--orange,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--orange { background: var(--bright-orange, #FC814C); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--danger,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--danger,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--danger { background: var(--orange, #E9482A); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--completed,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--completed,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--completed {
background: #ffffff;
border: 1px solid var(--color-primary, #0F6C72);
}
#page-totara-dashboard-33 #inst10607 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst11103 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst11136 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst10607 .progress-success .bar,
#page-totara-dashboard-33 #inst11103 .progress-success .bar,
#page-totara-dashboard-33 #inst11136 .progress-success .bar {
background-color: var(--light-blue) !important;
background-image: none !important;
}
/* --- Mandatory SOPs (inst10360) --- */
#page-totara-dashboard-33 #inst10360 .tabtree ul.nav.nav-tabs {
margin: 0px 12px;
padding: 10px 8px 12px 10px;
background: none !important;
}
#page-totara-dashboard-33 #inst10360 .nav.nav-tabs li {
padding-right: 20px;
padding-bottom: 8px;
}
#page-totara-dashboard-33 #inst10360 .content.block-content {
border-radius: 10px !important;
overflow: hidden !important;
}
#page-totara-dashboard-33 #inst10360 .block .block-header {
padding-top: 3rem !important;
}
#page-totara-dashboard-33 #inst10360 .panel-footer {
border-top: 0 !important;
padding: 0 20px 20px 20px !important;
}
#page-totara-dashboard-33 #inst10360 .block_current_learningas-tiles {
padding: 30px 15px 30px 15px;
}
#page-totara-dashboard-33 #inst10360 .content.block-content {
margin:5px;
}
.pnts-empty-msg {
text-align: center;
padding: 0px 20px;
}
/* --- PNTs Completados (inst10405) dentro dashboard-33 --- */
#page-totara-dashboard-33 #inst10405 .totara-table-container .totara-toolbar-top {
display: none !important;
}
#page-totara-dashboard-33 #inst10405 #instance-10405-header {
padding-top: 10px;
}
#page-totara-dashboard-33 #inst10405 .totara-table-container .toolbar-cell {
padding: 10px 20px !important;
}
#page-totara-dashboard-33 #report_finalizacion_del_curso_incluye_historial th.c2,
#page-totara-dashboard-33 #report_finalizacion_del_curso_incluye_historial td.c2 {
display: none !important;
}
/* Paginación activa */
#page-totara-dashboard-33 [class*="pagination"] .active,
#page-totara-dashboard-33 [class*="pagination"] .current,
#page-totara-dashboard-33 [class*="paging"] .active,
#page-totara-dashboard-33 [class*="paging"] .current,
#page-totara-dashboard-33 [class*="pager"] .active,
#page-totara-dashboard-33 [class*="pager"] .current {
font-weight: bold !important;
text-decoration: underline !important;
color: #0F6C72 !important;
pointer-events: auto !important;
}
/* Barra de búsqueda PNTs */
#page-totara-dashboard-33 .pnts-search-container {
display: flex;
align-items: center;
gap: 12px;
padding: 0 5px 8px 5px;
}
#page-totara-dashboard-33 .pnts-search-box {
position: relative;
flex: 1;
min-width: 220px;
max-width: 400px;
}
#page-totara-dashboard-33 .pnts-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 14px;
pointer-events: none;
z-index: 1;
}
#page-totara-dashboard-33 .pnts-search-input {
width: 100%;
padding: 10px 38px 10px 38px;
border: 1.5px solid #e5e7eb;
border-radius: 25px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
#page-totara-dashboard-33 .pnts-search-input:focus {
border-color: var(--color-primary, #0F6C72);
box-shadow: 0 0 0 3px rgba(15, 108, 114, 0.12);
}
#page-totara-dashboard-33 .pnts-search-input::placeholder {
color: #9ca3af;
font-style: italic;
}
#page-totara-dashboard-33 .pnts-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
font-size: 14px;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s ease, background 0.15s ease;
text-decoration: none;
}
#page-totara-dashboard-33 .pnts-search-clear:hover {
color: #1f2937;
background: #f3f4f6;
}
/* Paginación personalizada PNTs */
#page-totara-dashboard-33 #inst10607 .pnts-pagination,
#page-totara-dashboard-33 #inst11103 .pnts-pagination,
#page-totara-dashboard-33 #inst11136 .pnts-pagination {
display: flex;
justify-content: center;
padding: 4px 20px 20px;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__list,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__list,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
flex-wrap: wrap;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item a {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
border: 1.5px solid #e5e7eb;
background: #ffffff;
color: #374151;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: all 0.15s ease;
cursor: pointer;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item a:hover,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item a:hover,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item a:hover {
background: #f3f4f6;
border-color: var(--color-primary, #0F6C72);
color: var(--color-primary, #0F6C72);
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item.active a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item.active a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item.active a {
background: var(--color-primary, #0F6C72) !important;
border-color: var(--color-primary, #0F6C72) !important;
color: #ffffff !important;
font-weight: 700;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item.disabled a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item.disabled a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item.disabled a {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
7. CATÁLOGO
============================================================ */
.block_slickslider.catalog_hero .elslide div.nolink {
border-radius: 40px !important;
}
#page-content #text {
display: none !important;
}
#page-totara-catalog-index .tw-catalogItemNarrow__image {
padding-top: 55%;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f017";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f073";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
/* (Retirada la regla vieja del id_netex que ocultaba la 2.ª línea a tenant-user;
ahora la visibilidad de metadatos la gestiona el JS inyectado del catálogo.) */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item.itemtype {
color: var(--color-secondary) !important;
font-weight: 500 !important;
}
#page-totara-catalog-index .catalog__content .tw-selectRegionPanel.tw-selectRegionPanel__hiddenOnSmall {
min-width: 200px !important;
}
@media (min-width: 500px) {
#page-totara-catalog-index .catalog__content .tw-catalog__aside {
padding-right: var(--spacing-small) !important;
}
#page-totara-catalog-index .tw-selectRegionPanel.tw-selectRegionPanel__hiddenOnSmall {
min-width: 210px !important;
}
}
#page-totara-catalog-index .tw-catalogResultsShare__btn.btn,
#page-totara-catalog-index .tw-catalog__page_heading h2 {
display: none;
}
#page-totara-catalog-index .tw-catalog__results {
padding: 0 1em;
}
/* Filtros catálogo */
/* Ocultar para todos los usuarios el selector primario "Filtrar por sección"
(campo Filtro_bloque). El prefijo del urlkey es estable entre entornos y no
afecta al buscador, que vive en el selector primario contiguo. */
#page-totara-catalog-index .tw-catalog__primaryFilter .tw-selectRegionPrimary__selector:has([data-tw-selecttree-urlkey^="cfb_menu_filtrobloquemla"]) {
display: none !important;
}
#page-totara-catalog-index.tenant-user section.tw-selectRegionPanel__selector:has([id^="cfp_menu_acreditacionmla"]) {
display: none;
}
/* "Área temática" EXTERNA (areaextreaexter): oculta por defecto para todos; los
externos la reactivan más abajo. Por prefijo de campo (no por instancia). */
#page-totara-catalog-index .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_areaextreaexter"]) {
display: none;
}
/* Externos (tenant-user-ext): en el panel de filtros dejar "Área temática"
(la externa: areaextreaexter), "Idioma" y "Acreditación". Se ocultan TODOS los
grupos del panel y se reactivan esos por su PREFIJO de campo estable (no por el
sufijo de instancia _xxxxx, que cambia entre tenants/entornos). El recuadro
"FILTROS" (.tw-selectRegionPanel__heading) no es un __selector, así que no se
oculta. La reactivación de "Acreditación" gana también a la regla general
.tenant-user que la ocultaba (por !important + mayor especificidad del :has). */
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector {
display: none !important;
}
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_areaextreaexter"]),
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_idiomamlangesid"]),
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_menu_acreditacionmla"]) {
display: block !important;
}
/* Filtros de idiomas: dejar SOLO EN y ES (por prefijo de campo, cubre cualquier
instancia _xxxxx del filtro Idioma en cualquier tenant) */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_multiselect_idiomamlangesid"] .tw-selectMulti__list li:not(:has([data-tw-selectmulti-optionkey="EN"])):not(:has([data-tw-selectmulti-optionkey="ES"])) {
display: none;
}
/* Norteamérica (tenant-user-nam): ocultar los grupos «Idioma» y «LFE/Filtro_bloque»
del panel (queda visible «Área temática» general, sin OneTech). Por PREFIJO de
campo estable, no por sufijo de instancia _xxxxx (que varía por tenant). */
#page-totara-catalog-index.tenant-user-nam .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_idiomamlangesid"]),
#page-totara-catalog-index.tenant-user-nam .tw-selectRegionPanel__selector:has([id^="cfp_menu_filtrobloquemla"]) {
display: none !important;
}
/* Filtro "Filtro_bloque" (custom field filtrobloquemla): dejar visible SOLO la
opción "Curso de Excelencia LFE" en los 6 idiomas. Se targetea por su optionkey
estable (NO por posición): así no depende del orden alfabético —que cambia por
idioma— ni de la clase .lang-XX del body (que iba con combinador descendiente y
no casaba). Mismo patrón que el filtro de idiomas de arriba. El sufijo del id
(_39281) puede cambiar entre entornos → se usa ^= sobre el prefijo estable. */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_menu_filtrobloquemla"] .tw-selectMulti__list li:not(:has([data-tw-selectmulti-optionkey^="%7Bmlang%20es%7DCurso%20de%20Excelencia%20LFE"])) {
display: none;
}
/* Filtro "Área temática" (areatematicamla): ocultar la opción "OneTech".
Se targetea por su optionkey estable; ^= en el id cubre las dos instancias
del filtro (_6da85 y _16616) y sobrevive al cambio de sufijo entre entornos */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_menu_areatematicamla"] .tw-selectMulti__list li:has([data-tw-selectmulti-optionkey="OneTech"]) {
display: none;
}
#page-totara-catalog-index .tw-selectMulti__link_active,
#page-totara-catalog-index .tw-selectMulti__link:hover {
background: #fcefec;
}
/* Detalles catálogo externos */
.course-description .info-externos {
display: flex;
justify-content: space-between;
}
.course-description .info-externos a {
background-color: var(--color-secondary);
border-radius: 25px;
padding: 12px 25px;
color: white !important;
font-size: 1.1em;
font-weight: 500;
}
.course-description .info-externos a:hover {
background-color: var(--color-secondary-dark);
}
a.courserating-resume-lite {
display: none;
}
.info-catalogo {
margin-top: var(--spacing-xl);
display: flex;
justify-content: space-between;
}
.info-catalogo .info-izq {
width: 65%;
}
.info-catalogo .img {
max-width: 33%;
}
.info-cat-lfe {
background-color: #f0f5f6;
padding: 1.5em;
border-radius: var(--border-radius);
font-weight: 500;
color: var(--color-secondary-dark);
width: 65%;
}
#page-totara-catalog-index .tw-catalog .tw-catalogItemNarrow__textarea_group_item:nth-child(3) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
clip: rect(0, 0, 0, 0) !important;
}
/* Dashboard tenants - bloques featured links */
#inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content::before, #inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content::before,
#inst9363 .block-totara-featured-links-layout .block-totara-featured-links-content::before,
#inst9367 .block-totara-featured-links-layout .block-totara-featured-links-content::before, #inst9453 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0.0)!important;
}
#inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3 {
color:white!important;
font-size:0.95em!important;
padding-bottom:5px!important;
}
#inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3,
#inst9363 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3, #inst9367 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3, #inst9453 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3{
color:white!important;
padding-bottom:5px!important;
}
#inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom p, #inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom p{
color:white!important;
margin-top:-7px!important;
}
.block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover:hover {
opacity: 0.8 !important;
}
.block-totara-featured-links-layout.align-left.square {
margin-top:0px!important;
margin-bottom:20px!important;
}
#inst216 .block-totara-featured-links-layout.align-left.square {
margin-top:20px!important;
}
#inst9372 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0.0)!important;
}
#inst9372 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3{
color:white!important;
padding-bottom:5px!important;
}
/* Reportbuilder */
*:has(header input[name="id"][value="211"]) form#totara_reportbuilder_viewsavedsearch,
*:has(header input[name="id"][value="211"]) form.rb-search.mform,
*:has(header input[name="id"][value="211"]) form#totara_reportbuilder_viewsavedsearch,
*:has(header input[name="id"][value="211"]) form.rb-search.mform,
*:has(header input[name="id"][value="211"]) .box.reportbuilder-description {
display: none !important;
}
/* #inst9331 informe panel */
#inst9331 .totara-table-container .totara-toolbar-top {
display:none!important;
}
#inst9331 thead tr th {
background-color: #438693;
color: white;
padding: 14px;
}
#inst9331 thead a {
color: white!important;
}
/* #inst507 padding */
#inst507 .content.block-content {
padding: 0 !important;
}
/* Ocultación de filtros */
#inst350 .dropdown-toggle,
#inst287 .dropdown-toggle {
display: none;
}
/* ============================================================
8. CATEGORÍAS — #page-course-index-category
============================================================ */
#page-course-index-category.tenant-user .categorypicker {
display: none;
}
#page-course-index-category .course_category_tree .category .info {
border: none !important;
margin-bottom: var(--spacing-xl);
}
#page-course-index-category .course_category_tree .category > .content {
border: none !important;
}
#page-course-index-category .ft-fw {
font-size: 20px;
color: var(--color-secondary);
}
/* ============================================================
9. INFORMACIÓN DEL CURSO — #page-course-info / #page-enrol-index
============================================================ */
#page-course-info .coursefeatures > div.alert,
#page-enrol-index .coursefeatures > div.alert {
display: none;
}
#page-enrol-index .coursefeatures .box .btn {
margin-bottom: var(--spacing-medium);
}
#page-enrol-index .main #text {
display: none;
}
#page-enrol-index #usersfeedback {
display: none;
}
/* Fix temporal páginas curso */
#page-enrol-index div[role="main"],
#page-course-info div[role="main"] {
font-size: 0;
}
#page-enrol-index div[role="main"] .row,
#page-course-info div[role="main"] .row {
font-size: var(--font-body-size);
}
#page-enrol-index div[role="main"] > p > a,
#page-course-info div[role="main"] > p > a {
display: none;
}
/* Face to face */
.mod_facetoface__eventinfo.mod_facetoface__event_details .mod_facetoface__eventinfo__sidebar__panel {
background-color: #f0f4f5 !important;
}
.mod_facetoface__eventinfo__sidebar__panel #fitem_id_managername .felement.fstatic {
font-weight: bold;
}
h3.mod_facetoface__eventinfo__content__eventdetail__heading {
font-size: 22px !important;
}
.mod_facetoface__eventinfo__sidebar__panel form {
margin: auto;
}
/* ============================================================
10. VISTA DE CURSO — #page-course-view-*
============================================================ */
/* --- #page-course-view-onetopicas --- */
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:hover,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:focus,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:active {
background: var(--color-primary-light);
border-top: 0;
color: white !important;
border-radius: var(--border-radius-small);
box-shadow: none;
}
/* Se reduce el espacio del título de la actividad para que no se desplace el check*/
#page-course-view-onetopicas .section .activity .activityinstance{
width:95%;
}
#page-course-view-onetopicas .course-content .nav-tabs > li > a {
color: var(--color-text-light) !important;
font-weight: 500;
}
#page-course-view-onetopicas .section li.activity {
padding: 0;
}
#page-course-view-onetopicas .section .activity .activityinstance {
margin: 5px 0 9px 0;
font-weight: 500;
color: var(--color-primary-light);
}
#page-course-view-onetopicas .actions span.completion-auto-n,
#page-course-view-onetopicas .actions span.completion-auto-n:before {
margin-bottom: -15px;
}
#page-course-view-onetopicas .actions span.completion-auto-y,
#page-course-view-onetopicas .actions span.completion-auto-y:before,
#page-course-view-onetopicas .actions span.ft-state-success,
#page-course-view-onetopicas .actions span.ft-state-success:before {
margin-bottom: -13px;
}
/* Botón de finalización manual en contentafterlink: evita movimiento y tooltip */
.contentafterlink .actions .btn.btn-link,
.contentafterlink .actions .btn.btn-link:hover,
.contentafterlink .actions .btn.btn-link:focus {
transform: none !important;
transition: none !important;
vertical-align: middle !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
box-shadow: none !important;
}
.contentafterlink .actions span.completion-manual-n,
.contentafterlink .actions span.completion-manual-n::before,
.contentafterlink .actions span.completion-manual-y,
.contentafterlink .actions span.completion-manual-y::before,
.contentafterlink .actions span.flex-icon {
pointer-events: none !important;
transform: none !important;
transition: none !important;
}
#page-course-view-onetopicas .section .activity .contentafterlink {
background-color: #f0f5f680;
padding: 1em 0.5em 0 1em;
border-radius: 12px 0 0 0;
margin-left: 65px;
margin-top:0px!important;
}
#page-course-view-topics .course-content h3.sectionname {
color: var(--color-link-lateral-block);
}
.format-topcollas .content.sectionhidden {
display: none !important;
}
/* --- .course-description y sub-selectores --- */
.course-description .course-overview .introduction {
background-color: var(--color-background) !important;
padding: 1em;
border-radius: var(--border-radius);
}
.course-description .course-overview .introduction .profes {
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
justify-content: space-between;
}
.course-description .course-overview .introduction .profes {
gap: var(--spacing-small);
}
.course-description .course-overview .introduction .profes div {
background-color: white !important;
padding: 12px var(--spacing-small);
border-radius: 8px;
display: flex;
align-items: center;
width: 100%;
}
.course-description .course-overview .introduction .profes .coordination {
margin-right: var(--spacing-small);
}
.course-description .course-overview .introduction .profes div b {
color: var(--light-blue) !important; /* azul corporativo (antes teal #008897) */
margin-right: 5px;
font-weight: 500 !important;
}
.course-description h4,
.seccion-eval h4 {
font-size: 17px !important;
color: var(--color-text-gray) !important;
}
.course-description .competencias {
border-left: 2px solid #52b4bb40;
}
.course-description .competencias ul li::marker {
color: var(--color-secondary-dark) !important;
}
.course-description .detalles {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
justify-content: space-between;
}
.course-description .detalles .icon-text {
flex: 1;
min-width: 180px;
background: var(--color-background) !important; /* antes --color-gray-light */
padding: var(--spacing-medium);
border-radius: var(--border-radius);
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
gap: 12px;
text-align: left;
justify-content: space-between;
}
.course-description .detalles .icon-text img {
width: 50px !important;
margin: 0 0 0.5em 0.5em !important;
}
.course-description .detalles .icon-text .text-box span {
font-weight: bold !important;
color: var(--navy-blue) !important; /* antes #e39282 (naranja) */
text-transform: uppercase;
}
.course-description .accreditation {
background-color: var(--color-background) !important; /* antes --color-gray-light */
padding: 1em 0 0 1em;
border-radius: var(--border-radius);
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: wrap;
}
.course-description .accreditation .izq {
width: 76%;
padding-bottom: 1em;
}
.course-description .accreditation .izq b {
color: var(--light-blue) !important; /* antes #2d6874 (teal) */
}
.course-description .accreditation .img-dcha {
width: 24%;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.course-description .accreditation .img-dcha .atto_image_button_text-bottom {
width: auto !important;
padding: 0 !important;
margin-right: 0px !important;
}
.course-description .compatibility {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-large);
margin-bottom: 1em !important;
}
.course-description .compatibility p {
flex: 2;
margin: 0;
color: var(--color-text-gray);
max-width: 60%;
}
.course-description .navegador {
flex: 1;
display: flex;
justify-content: flex-end;
}
.course-description .navegador img {
max-width: 100%;
width: 300px;
height: auto;
}
.course-description .ventanas_em {
display: flex;
padding: 1em var(--spacing-small) 0px 0px;
}
.course-description .ventanas_em .izq img {
width: 70px;
margin: 0 var(--spacing-large) 0 0;
height: auto;
}
/* --- .seccion-eval --- */
.seccion-eval h4 {
margin: 0 !important;
}
.seccion-eval li.activity.label.modtype_label:has(h4) {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.tab_content.tab_level_0.dimmed {
display: none !important;
}
/* --- Visual grid --- */
.category-61.format-visualgrid #section-0 .section li.activity a.visualgridimg {
background-size: contain !important;
background-position-y: top !important;
}
#page-course-view-visualgrid.format-visualgrid #section-0 .activityinstancezero h2 {
font-family: var(--font-title) !important; /* antes 'Gotham' (legacy) */
color: #3b8596;
letter-spacing: 0;
}
/* --- Tablas form-obligatoria y form-excelencia --- */
.summary table.form-obligatoria,
.summary table.form-excelencia {
background-color: white !important;
border-radius: var(--border-radius) !important;
width: 100% !important;
}
.summary table.form-obligatoria thead,
.summary table.form-excelencia thead {
background-color: var(--light-blue, #004DF0);
color: #fff;
font-size: 18px;
}
.summary table.form-obligatoria thead th,
.summary table.form-excelencia thead th {
padding: var(--spacing-small) !important;
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}
.summary table.form-obligatoria tbody td,
.summary table.form-excelencia tbody td {
padding: 5px var(--spacing-small) !important;
}
.summary table.form-obligatoria tbody td:has(strong),
.summary table.form-excelencia tbody td:has(strong) {
background-color: var(--bg-blue, #DCE6FF);
color: var(--navy-blue, #08004F);
text-align: left !important;
}
.summary table.form-excelencia tbody .excelencia td {
background-color: var(--teal, #0CE3C6) !important;
padding: var(--spacing-small) !important;
color: var(--navy-blue, #08004F) !important;
text-transform: uppercase;
font-size: 1em !important;
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}
.summary table.form-excelencia tbody td:last-child {
text-align: right;
border-left: 2px solid var(--border-soft, #E4E2EE);
}
.summary table.form-excelencia tbody .excelencia td:last-child {
text-align: right !important;
border-left: 2px solid rgba(8, 0, 79, 0.15);
}
/* --- .course-icon-text, .icon-text --- */
.course-icon-text {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.icon-text {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-text img {
width: 130px;
}
.icon-text span {
text-align: center;
}
/* --- .lfe h3, .tutor_lfe, .lfe .icon-text --- */
.lfe h3 {
font-size: 18px;
margin-bottom: var(--spacing-medium);
}
.tutor_lfe {
color: var(--color-primary);
font-weight: 700;
}
.lfe .icon-text img {
max-width: 35px !important;
margin-bottom: var(--spacing-medium);
}
.lfe .icon-text {
text-align: center;
}
.course-icon-text.lfe {
margin-top: var(--spacing-xl);
}
/* --- .format-pathway --- */
.format-pathway .tui-formBtnGroup.tui-format_pathway-activityFooter a.tui-actionLink {
color: #fff !important;
background: var(--btn-prim-bg-color);
color: var(--btn-prim-text-color);
padding: 6px var(--spacing-large);
font-size: 1.4rem;
border-radius: var(--btn-button-border-radius);
text-align: center;
}
.format-pathway .tui-formBtnGroup.tui-format_pathway-activityFooter a.tui-actionLink:hover {
box-shadow: none;
color: var(--btn-prim-text-color-focus);
background-color: var(--btn-prim-bg-color-active);
}
/* --- .course-menu ul --- */
.course-menu ul {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
/* --- .summary .no-overflow h3 --- */
.summary .no-overflow h3 {
font-size: 20px !important;
color: #026976;
margin: 0;
}
/* --- body.course-1022 --- */
.course-1022 li.resource.modtype_resource {
margin-left: var(--spacing-xl) !important;
}
/* ============================================================
11. ITINERARIO ENFERMERÍA — body.course-1061
============================================================ */
body.course-1061 #region-top .content.block-content {
max-width: 1650px;
margin:auto;
border-radius:20px;
background-color:white;
padding:20px!important;
box-shadow:0 1px 3px 1px #ddd;
}
/*body.course-1061 #region-top .block .block-header{
display:none!important;
}*/
/* Checks desplazados */
body.course-1061 #module-18401 .activityinstance{
width:94%!important;
}
body.course-1061 #module-18419 .activityinstance{
width:94%!important;
}
body.course-1061 #region-top .content.block-content{
margin-top:-68px!important;
}
/* ============================================================
12. PROGRAMAS — .path-totara-program
============================================================ */
.path-totara-program .descprograma h4 {
color: var(--color-secondary-dark) !important;
text-transform: uppercase;
font-size: 1em;
}
.path-totara-program.context-32745 .descprograma h4 {
color: #fbeeea !important;
}
.path-totara-program .programprogress .startdate,
.path-totara-program .programprogress .item {
color: #f0f5f6 !important;
}
.path-totara-program .programprogress .separador {
border-color: #f0f5f690 !important;
}
.path-totara-program .display-program h3 {
color: #3c6671;
}
#inst8272 .dropdown-toggle {
display: none;
}
/* ============================================================
13. FEEDBACK Y EVALUACIONES — .path-mod-feedback
============================================================ */
#page-mod-page-view .modified {
display: none;
}
#feedback h3[id^="yui_"],
#feedback h3:nth-of-type(2) {
display: none;
}
#feedback .quizgradefeedback p {
background-color: var(--color-background);
padding: 1em;
border-radius: var(--border-radius);
font-weight: 500;
}
.feedback_form.ianonymous.mform {
margin-top: 35px;
}
.feedback_form.ianonymous.mform .legend,
.feedback_form.ianonymous.mform .requirednote,
.fitem.femptylabel.feedback_mode {
display: none !important;
}
#feedback_dragarea .feedback_form.ianonymous.mform .legend, #feedback_dragarea .feedback_form.ianonymous.mform .requirednote,#feedback_dragarea .fitem.femptylabel.feedback_mode{
display: block !important;
}
.feedback_form.ianonymous.mform .fitem .fitemtitle {
width: 0% !important;
}
.feedback_form.ianonymous.mform .fitem > fieldset > legend {
width: 0%;
}
.path-mod-feedback div.feedback_itemlist {
border: none;
margin: 0;
padding-top: 0;
}
.feedback_form.ianonymous.mform .fitem_actionbuttons {
margin-top: 35px;
}
.feedback_form.ianonymous.mform .felement {
margin: 0 0 15px 0 !important;
}
.feedback_form.ianonymous.mform .felement.fstatic {
margin-bottom: 0 !important;
padding-bottom: 0;
}
.feedback_form.ianonymous.mform .fgroup .felement label {
margin: 2px 13px 0 0;
}
.mform .felement.fstatic .no-overflow {
color: #666666;
font-weight: 600;
}
/* Quiz / evaluaciones */
.que.multichoice.deferredfeedback .qtext {
font-weight: 500;
color: var(--navy-blue);
margin: 3px 0 0 -20px;
}
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
padding-left: 7px;
border-radius: 15px;
}
.que.multichoice .answer div.r0 input,
.que.multichoice .answer div.r1 input {
margin: 0 -7px 0 -38px;
}
.que.multichoice.deferredfeedback .state,
.que.multichoice.deferredfeedback .grade,
.que.multichoice.deferredfeedback .questionflag {
display: none;
}
.que.multichoice.deferredfeedback .no {
background-color: var(--teal);
border-radius: 16px;
text-align: center;
padding: 5px;
color: white;
}
/* Cuestionario condiciones */
li.option #choice_1{
margin-bottom: 40px!important;
}
/* ============================================================
14. PERFIL DE USUARIO — #page-user-profile
============================================================ */
#page-user-profile.tenant-user-ext #inst8291,
#page-user-profile.tenant-user-ext #inst12.block_totara_user_profile,
#page-user-profile.tenant-user-ext #inst10.block_totara_user_profile {
display: none !important;
}
/* Bloques inst9 e inst10 (block_totara_user_profile): fondo warm gray
(2026-09-03). OJO: inst10 se oculta arriba en tenant externo → allí solo
se ve en inst9. */
#page-user-profile #inst9 .content.block-content,
#page-user-profile #inst10 .content.block-content {
background-color: var(--warm-gray) !important;
}
/* Avatares SIN borde: ficha de perfil (.tw-profileCard__avatar__img) y avatar
del topbar (.totaraNav_prim--side .usermenu .userpicture). El borde lo ponía
el tema (var(--color-text) / --nav-tab-text-color); se anula (2026-09-03). */
.tw-profileCard__avatar__img,
.totaraNav_prim--side .usermenu .userpicture {
border: none !important;
}
/* ============================================================
15. CALIFICACIONES — #page-grade-report-overview-index
============================================================ */
@media (min-width: 768px) {
#page-grade-report-overview-index h3 {
color: var(--color-secondary-dark) !important;
}
#page-grade-report-overview-index table thead tr th {
background-color: var(--color-accent);
color: white;
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-weight: bold;
padding: var(--spacing-small) var(--spacing-medium);
}
#page-grade-report-overview-index #overview-grade thead tr th.c0 {
border-top-right-radius: 0;
}
#page-grade-report-overview-index #overview-grade thead tr th.c1 {
border-top-left-radius: 0;
}
#page-grade-report-overview-index h3::before {
content: "";
display: inline-block;
width: 50px;
height: 30px;
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/icon-profes_dark-blue.svg');
background-size: contain;
background-repeat: no-repeat;
margin: 0 5px 0 var(--spacing-small);
vertical-align: middle;
}
#page-grade-report-overview-index .no-overflow,
#page-grade-report-overview-index div h3:first-of-type {
display: none;
}
}
/* ============================================================
16. CALENDARIO — .path-calendar
============================================================ */
@media (min-width: 768px) {
.maincalendar .event {
background-color: #f0f4f560 !important;
border-color: #f0f4f5 !important;
}
.maincalendar .event .course {
margin: var(--spacing-small) 0;
font-weight: 500;
font-size: 1.1em;
}
.maincalendar .event .course .description.card-block .no-overflow {
padding: var(--spacing-medium) !important;
border-radius: var(--border-radius) !important;
}
.path-calendar .maincalendar .calendar-controls .current::first-letter {
text-transform: uppercase;
}
.path-calendar .maincalendar .calendar-controls .current {
font-size: 20px;
}
.maincalendar .eventlist h3.name {
padding: 0px var(--spacing-medium);
text-transform: capitalize;
}
.description.card-block.calendar_event_global {
border-radius: var(--border-radius);
}
.description.card-block.calendar_event_global p {
padding: var(--spacing-small);
}
.maincalendar .header .form-inline,
.maincalendar .calendar-mod-filters #module_filter_facetoface {
display: none;
}
.minicalendarblock .minicalendar.calendartable h3 a,
.block_calendar_month .minicalendar.calendartable.days-in-week-7 .calendar-controls .current a {
text-transform: capitalize !important;
}
}
/* ============================================================
17. BASE DE DATOS — #page-mod-data-*
============================================================ */
#page-mod-data-edit.tenant-user tr.onlyadmin,
#page-mod-data-view.tenant-user .alert.alert-danger.alert-with-icon.fade.in {
display: none;
}
/* --- Database Certificados ACTUA --- */
.ividb_cert {
width: 100%;
background-color: #f0f0f0;
border: 1px solid #F0F0F0;
padding: var(--spacing-large);
border-radius: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.ividb_right {
width: 20%;
}
.ividb_left {
width: 80%;
}
p.ividb_text {
margin: 0px;
}
span.ividb_bold {
font-weight: 600;
color: #000;
}
span.ividb_name {
font-weight: 600;
color: var(--light-blue);
}
p.ividb_certificatelink {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
.ividb_certificatelink span.flex-icon.ft-fw.ft.file_pdf.actua-icon {
display: none;
}
.ividb_certificatelink a {
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/download-pdf.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
font-size: 0px;
max-width: 100px;
}
.ividb_actionbtn [class*=" tfont-var-"] {
font-size: 20px;
}
.tenant-user .ividb_adminvisible,
.tenant-user .tabtree .nav-tabs li:has(a[href*="mode=asearch"]),
.tenant-user .datapreferences #pref_sortby,
.tenant-user .datapreferences #advancedcheckbox,
.tenant-user .datapreferences label.mr-3 {
display: none !important;
}
.datapreferences {
margin-bottom: var(--spacing-large);
}
/* --- Database entry --- */
.ividb-entry tr td.lastcol input,
.ividb-entry tr td.lastcol .custom-select {
width: 95% !important;
max-width: 95% !important;
}
.ividb-entry tr.ividb_adminvisible td.lastcol {
text-align: right;
}
.ividb-entry tr td.c0 {
font-weight: 500;
text-align: left;
}
.ividb-entry tr td.c0 em {
font-weight: 400;
opacity: 0.8;
}
.ividb-entry tr td.lastcol fieldset legend,
.ividb-entry tr td.lastcol fieldset .inline-req {
display: none;
}
.fdescription.required {
margin-bottom: var(--spacing-large);
}
.ividb-entry .inline-req .form-required.flex-icon,
.ividb-entry .inline-req .form-required.flex-icon::before {
color: var(--red, #B4084A) !important;
}
/* --- Database Certificados IVIRMA --- */
#intro .info-certificados {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-small);
justify-content: space-between;
}
#intro .info-certificados div {
min-width: 180px;
background: var(--color-background) !important;
padding: var(--spacing-medium);
border-radius: var(--border-radius);
display: flex;
align-items: flex-start;
text-align: left;
width: 100%;
}
#intro .info-certificados div.attending {
flex: 0 1 40%;
}
#intro .info-certificados div.delivery {
flex: 0 1 58.5%;
}
#intro .info-certificados .text-box {
flex-direction: column !important;
padding: 0 !important;
}
#intro .info-certificados .atto_image_button_text-bottom {
width: 50px !important;
margin: 0 0 0.5em 0.5em !important;
}
#intro .info-certificados i {
opacity: 0.8;
margin: 12px 0 16px -10px;
font-weight: 500;
}
#intro .info-certificados span.title {
font-weight: bold !important;
color: var(--color-primary) !important;
text-transform: uppercase;
}
#intro .info-certificados p {
padding: 0 !important;
}
#intro .info-certificados div.delivery p.nurse {
font-weight: 400 !important;
}
#intro .info-certificados div.delivery p.nurse b {
font-weight: 500 !important;
}
/* ============================================================
18. MENSAJERÍA
============================================================ */
.messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
padding: 0 33px;
line-height: 2;
}
.messaging-area-container .messaging-area .messages-area .messages-header .name-container .status {
margin: 5px 0;
}
.btn.btn-link.messages-delete {
margin: 0.5em 0 -0.5em 0;
align-content: center;
}
.messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea {
border-radius: var(--border-radius-medium);
width: 98%;
}
.messaging-area-container .messaging-area .messages-area .response {
height: 62px;
}
.messaging-area-container .messaging-area .contacts-area .tabs {
height: 62px;
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea input {
border-radius: 5px;
}
.messaging-area-container .messaging-area .messages-area.editing .messages-header .actions {
align-items: center;
}
.messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
margin-bottom: 3px;
}
.messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm {
border-radius: var(--border-radius-large);
align-items: center;
}
/* ============================================================
19. INFORMES LFE
============================================================ */
/* --- #inst214 cursos finalizados --- */
#inst214 thead,
#inst214 .footer,
#inst214 td.course_completion_iscomplete {
display: none;
}
#inst214 tbody {
display: flex;
flex-direction: row;
}
div#region-main #inst214.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst214 tr {
width: calc(50% - 10px);
border-top: 0;
background: transparent;
}
#inst214 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst214 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
border-radius: var(--border-radius) !important;
filter: drop-shadow(0px 4px 4px rgba(0.5, 0.5, 0.5, 0.06));
}
#inst214 td a:hover {
filter: drop-shadow(0px 4px 4px rgba(0.8, 0.8, 0.8, 0.1));
}
#inst214 td a img.course_icon {
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* --- Informes monthlys y must read papers --- */
.category-35 #inst8086 thead,
.category-35 #inst8086 .footer,
.category-35 .block_totara_report_table thead,
.category-35 .block_totara_report_table .footer,
#inst8428.block_totara_report_table thead,
#inst8428.block_totara_report_table .footer {
display: none !important;
}
#inst8174 thead tr th,
#inst8190 thead tr th {
background-color: var(--color-primary) !important;
color: white;
}
#inst8428 thead tr th {
background-color: #e79181 !important;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
#inst8174 thead tr th a,
#inst8190 thead tr th a,
#inst8428 thead tr th a {
color: white !important;
padding: 0px var(--spacing-small);
}
#inst8174 thead tr th:first-child,
#inst8190 thead tr th:first-child {
border-top-left-radius: var(--border-radius);
}
#inst8174 thead tr th.course_completion_grade,
#inst8190 thead tr th.course_completion_grade {
border-top-right-radius: var(--border-radius);
text-align: center;
}
#inst8174 td.course_completion_grade,
#inst8190 td.course_completion_grade {
text-align: center;
}
.path-course.category-35 table#report_finalizacion_del_curso12 thead,
.path-course table#report_finalizacion_del_curso121 thead,
.path-course table#report_finalizacion_del_curso121 .footer a,
#inst8174 .footer a,
#inst8190 .footer a {
display: none;
}
.path-course.category-35 #block-region-side-post .block_totara_report_table .content .footer a,
.path-course.category-35 .totara-toolbar.totara-toolbar-top.clearfix,
.path-course.category-54 #block-region-side-post .block_totara_report_table .content .footer a,
.path-course.category-36 #block-region-side-post .block_totara_report_table .content .footer a,
#inst8428.block_totara_report_table .footer,
.path-course.category-36 .totara-toolbar.totara-toolbar-top.clearfix {
display: none;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td,
.path-course.category-54 table#report_finalizacion_del_curso121 td,
.category-54 #inst136 td,
#inst8174 td,
#inst8190 td {
background-color: #fff;
padding: 1em;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td a,
.path-course table#report_finalizacion_del_curso121 td a,
.category-54 #inst136 td a img.course_icon,
#inst8174 td a,
#inst8190 td a,
#inst8428.block_totara_report_table td a {
display: flex;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td a img,
#inst8174 td a img,
.path-course table#report_finalizacion_del_curso121 td a img,
#inst8428.block_totara_report_table td a img {
margin-right: var(--spacing-small);
}
.path-course.category-35 .totara-table-container .toolbar-right-table {
float: none;
margin: auto;
text-align: center;
}
/* --- Informe mi equipo --- */
#my-teammembers-content ul > li:nth-child(4),
#my-teammembers-content ul > li:nth-child(6),
#my-teammembers-content ul > li:nth-child(7) {
display: none;
}
/* ============================================================
20. BLOQUES PNTs
============================================================ */
/* La antigua tarjeta .pnts-card (foto + VAGRoundedStd) se retiró el
2026-07-13: el bloque usa ahora .ivi-pnts__card (sección 28.2).
La clase pnts-card__title pervive en el HTML solo como gancho del
bloque "JS: Recuento PNTs restantes". */
/* #inst10236 = bloque PNT del tenant IMR (imrcampus.com) — estilos propios en imr/css-tenant-imr.css */
#inst291 thead,
#inst797 thead,
#inst215 thead,
#inst10236 thead,
#inst230 thead {
display: none;
}
#inst291 .footer,
#inst797 .footer,
#inst215 .footer,
#inst10236 .footer,
#inst230 .footer {
display: none;
}
#inst291 tbody,
#inst797 tbody,
#inst215 tbody,
#inst10236 tbody,
#inst230 tbody {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#region-main #inst291.block .content,
div#region-main #inst797.block .content,
div#region-main #inst215.block .content,
div#region-main #inst10236.block .content,
div#region-main #inst230.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst291 tr,
#inst797 tr,
#inst215 tr,
#inst10236 tr,
#inst230 tr {
width: calc(50% - 10px);
border-top: 0;
background: transparent;
}
#inst291 td,
#inst797 td,
#inst215 td,
#inst10236 td,
#inst230 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst291 td a,
#inst797 td a,
#inst215 td a,
#inst10236 td a,
#inst230 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
border-radius: var(--border-radius) !important;
filter: drop-shadow(0px 4px 4px rgba(0.5, 0.5, 0.5, 0.06));
}
#inst291 td a:hover,
#inst797 td a:hover,
#inst215 td a:hover,
#inst10236 td a:hover,
#inst230 td a:hover {
filter: drop-shadow(0px 4px 4px rgba(0.8, 0.8, 0.8, 0.1));
}
#inst291 td a img.course_icon,
#inst797 td a img.course_icon,
#inst215 td a img.course_icon,
#inst230 td a img.course_icon {
background: var(--color-primary-light);
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* --- #inst10405 bloques PNTs completados --- */
#inst10405 .totara-table-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
}
#inst10405 thead {
display: none;
}
#inst10405 .footer {
display: none;
}
#inst10405 tbody {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#region-main #inst10405.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst10405 tr {
width: calc(31%);
border-top: 0;
background: transparent;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
padding: 10px;
border-radius: 15px;
margin: 5px;
}
#inst10405 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst10405 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
}
#inst10405 td a img.course_icon {
background: var(--color-primary-light);
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* Icono ordenar */
#inst10405 th .iconsort {
color: #0F6C72 !important;
}
#inst10405 table.totaratable tbody tr {
background: #ffffff !important;
margin-bottom: 10px;
}
#inst10405 table.totaratable tbody tr {
background: #ffffff !important;
margin: 10px;
}
#inst10405 table.totaratable tbody tr td {
padding: 12px 16px;
}
#inst10405 table.totaratable td {
padding: 10px 10px 2px 10px !important;
border: none !important;
font-size: 15px !important;
}
#inst10405 table.totaratable a {
color: #0F6C72 !important;
font-weight: 600;
text-decoration: none;
}
#inst10405 .progressbar_container .bar {
border-radius: 20px !important;
}
#inst10405 .bar[aria-valuenow="0"] {
background: #D2D2D2 !important;
}
#inst10405 .bar[aria-valuenow="50"] {
background: #FF9F37 !important;
}
#inst10405 .progressbar__text {
color: #444 !important;
font-size: 14px !important;
margin-left: 6px;
}
#inst10405 .footer,
#inst10405 .footer a {
display: none !important;
}
#inst10405 table.totaratable td.course_courselink a {
position: relative;
padding-left: 26px !important;
display: inline-flex;
align-items: center;
}
#inst10405 table.totaratable td.course_courselink a::before {
font-family: "FontAwesome";
content: "\f0f6";
font-size: 20px;
color: #F58C7C;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.95;
}
#inst10405 table.totaratable td.base_timecompleted::before {
font-family: "Font Awesome 6 Free";
font-weight: 400;
content: "\f058";
padding-right: 10px;
font-size: 18px;
color: #4fcb3e;
position: relative;
left: 0;
top: 40%;
opacity: 0.95;
}
#inst10405 table.totaratable td.course_courselink a:hover::before {
opacity: 1;
}
/* --- #inst10507 --- */
#inst10507 .content.block-content {
padding: 0 !important;
}
/* ============================================================
21. CERTIFICADOS Y BADGES
============================================================ */
.block_badges ul.badges img {
width: 110px;
height: 110px;
}
/* --- Home externos: "Mis últimas insignias" (#inst355) ---
El script home-externos--js-ultimas-insignias.html añade la clase
.ivi-badges-enhanced y las clases del sistema IVI al enlace nativo. */
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .content.block-content {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: var(--warm-gray, #FAF4EE) !important;
border: 1px solid var(--border-soft, #E4E2EE) !important;
border-radius: 14px !important;
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
padding: 28px 32px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 28px 20px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Hasta seis badges por fila, siempre alineados desde la izquierda. */
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
float: none !important;
display: flex !important;
flex: 0 1 calc((100% - 100px) / 6) !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 145px !important;
max-width: 220px !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges img {
display: block !important;
width: 145px !important;
height: 145px !important;
max-width: 100% !important;
margin: 0 auto 14px !important;
object-fit: contain !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges a {
color: var(--navy-blue, #08004F) !important;
line-height: 1.4 !important;
text-align: center !important;
text-decoration: none !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges a:hover {
color: var(--light-blue, #004DF0) !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .ivi-badges-seeall-wrap {
position: static !important;
width: 100% !important;
margin-top: 28px !important;
text-align: center !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced a.ivi-badges-seeall {
margin: 0 !important;
border-radius: var(--btn-radius-pill, 999px) !important;
}
@media (max-width: 1199px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 60px) / 4) !important;
}
}
@media (max-width: 991px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 40px) / 3) !important;
}
}
@media (max-width: 767px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .content.block-content {
padding: 22px 18px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 20px) / 2) !important;
min-width: 130px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges img {
width: 130px !important;
height: 130px !important;
}
}
@media (max-width: 420px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: 100% !important;
}
}
.ividb_uservisible_1 {
margin-right: var(--spacing-large);
}
.ividb_left_1 {
display: flex;
}
.ividb_text_1 {
margin-bottom: 7px !important;
color: #000;
}
.ividb_bold_1 {
color: #000;
}
.listado ul li::marker {
color: var(--color-secondary-dark) !important;
}
.listado {
border-left: 2px solid #52b4bb40;
margin-bottom: var(--spacing-medium);
}
.listado ul li {
line-height: 1.8em !important;
font-weight: 500;
color: var(--color-secondary-dark);
}
.no_incluido {
background: #fafafa !important;
padding: var(--spacing-small) var(--spacing-large);
border-radius: var(--border-radius);
margin: var(--spacing-small) 0 !important;
line-height: 1.8em !important;
}
.no_incluido h4 {
color: #F58C7C;
font-size: 18px;
}
.tesis {
display: flex;
align-items: flex-start;
background: var(--color-background) !important;
padding: var(--spacing-medium) var(--spacing-medium) 5px var(--spacing-small);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-large);
}
.tesis img {
margin-right: var(--spacing-medium);
}
/* ============================================================
22. EXPEDIENTE
============================================================ */
#dp-plan-content ul.nav-tabs li.active a {
color: white;
border-radius: 8px;
margin-bottom: 5px;
}
.tabtree ul.nav.nav-tabs {
padding-bottom: 5px;
}
/* ============================================================
23. FAQ ACORDEÓN
============================================================ */
.accordion.actuasolutions .linkheader,
.accordion.actuasolutions .linksubheader {
width: 100%;
border-bottom: 1px solid var(--color-gray-border);
padding: var(--spacing-small) 0;
display: block;
color: var(--light-blue);
cursor: pointer;
font-weight: 700;
}
.accordion.actuasolutions .linkheader {
font-size: 1.6rem;
}
.accordion.actuasolutions .linksubheader {
font-size: 1.45rem;
margin-left: var(--spacing-small);
}
.accordion.actuasolutions .linkheader:not(.collapsed) {
color: var(--color-text-gray);
}
.accordion.actuasolutions .linkheader:after,
.accordion.actuasolutions .linkheader:not(.collapsed):after {
content: "";
float: right;
margin-right: var(--spacing-small);
font-family: fontawesome;
}
.accordion.actuasolutions .linkheader:after {
color: #12B4A2;
}
.accordion.actuasolutions .linkheader:not(.collapsed):after {
color: var(--color-header-highlight);
}
.accordion.actuasolutions .accordioncontent {
margin: var(--spacing-small) 0 0 var(--spacing-small);
padding: var(--spacing-small) 0 var(--spacing-xl) 0;
border-bottom: 1px solid var(--color-gray-border);
}
/* ============================================================
24. MODAL VIMEO
============================================================ */
#vimeo-custom-modal.vimeo-modal-container {
display: none;
position: fixed;
z-index: 10000 !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
overflow: hidden;
}
#vimeo-custom-modal.vimeo-modal-container.show,
#vimeo-custom-modal[style*="display: flex"] {
display: flex !important;
}
.vimeo-modal-content {
position: relative;
background-color: transparent;
width: 90vw;
max-width: 1200px;
height: auto;
max-height: 90vh;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
}
.vimeo-modal-close-btn {
color: var(--color-white);
position: absolute;
top: -50px;
right: 0;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
user-select: none;
}
.vimeo-modal-close-btn:hover,
.vimeo-modal-close-btn:focus {
color: #ccc;
transform: scale(1.1);
}
.vimeo-iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-color: #000;
border-radius: 8px;
overflow: hidden;
}
.vimeo-iframe-container iframe.vimeo-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.vimeo-modal-content {
width: 95vw;
max-height: 80vh;
}
.vimeo-modal-close-btn {
top: -40px;
font-size: 30px;
right: 5px;
}
}
@media (max-width: 480px) {
.vimeo-modal-content {
width: 98vw;
}
.vimeo-modal-close-btn {
top: -35px;
font-size: 28px;
}
}
/* ============================================================
25. CIBERSEGURIDAD — inst11277
============================================================ */
/* --- Header del bloque Totara (instance-11277-header) --- */
#inst11277 .block-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 1.25rem !important;
}
#instance-11277-header,
#inst11277 .block-title h2 {
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-size: 30px !important;
font-weight: 700 !important;
color: #17417B !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.01em !important;
background: transparent !important;
border: none !important;
}
#inst11277,
#inst11277 > .content,
#inst11277 .block-content,
#inst11277 .no-overflow {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
/* --- Contenedor raíz --- */
.cyber-standalone {
padding: 0;
width: 100%;
}
.cyber-standalone__title {
display: none;
}
/* --- Grid 3 columnas --- */
.cyber-standalone__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
align-items: stretch;
}
@media (max-width: 900px) {
.cyber-standalone__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cyber-standalone__grid { grid-template-columns: 1fr; }
}
.cyber-standalone__grid > li {
display: flex;
flex-direction: column;
}
/* --- Card --- */
.cyber-card {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
border-radius: 25px;
border: 0.5px solid rgba(0,0,0,0.07);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cyber-card:hover {
border-color: #17417B;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(23,65,123,0.12), 0 2px 4px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
}
.cyber-card.is-disabled {
cursor: default;
pointer-events: none;
}
.cyber-card.is-disabled:hover {
border-color: rgba(0,0,0,0.07);
transform: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
}
.cyber-card.is-disabled .cyber-card__bg {
filter: blur(2px) grayscale(30%) brightness(0.9);
opacity: 0.7;
}
.cyber-card.is-disabled .cyber-card__overlay {
opacity: var(--disabled-overlay-opacity, 0.4);
}
.cyber-card.is-disabled .cyber-card__soon {
opacity: var(--disabled-badge-opacity, 0.8);
background: var(--disabled-badge-bg, var(--color-primary));
}
.cyber-card.is-disabled .cyber-card__body,
.cyber-card.is-disabled .cyber-card__footer {
opacity: var(--disabled-text-opacity, 0.25);
}
/* --- Imagen de cabecera --- */
.cyber-card__image {
position: relative;
height: 140px;
overflow: hidden;
background: #ffffff;
flex-shrink: 0;
}
.cyber-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,83,0.1) 0%, rgba(14,43,83,0.65) 100%);
z-index: 1;
}
.cyber-card__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(2px);
transform: scale(1.05);
}
/* --- Badge Próximamente --- */
.cyber-card__soon {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
background: var(--color-primary-light);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 5px 11px 5px 9px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 6px;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cyber-card__soon .fa {
font-size: 10px;
color: #fff;
flex-shrink: 0;
}
/* --- Overlay título sobre imagen --- */
.cyber-card__overlay {
position: absolute;
bottom: 14px;
left: 16px;
right: 16px;
z-index: 2;
pointer-events: none;
}
.cyber-card__overlay-title {
display: block;
color: #fff;
font-size: 19px;
font-weight: 700;
line-height: 1.25;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
margin: 0;
padding-right: 3em;
}
.cyber-card__overlay-sub {
display: block;
color: rgba(255,255,255,0.88);
font-size: 12px;
margin-top: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* --- Cuerpo --- */
.cyber-card__body {
padding: 16px 18px 10px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
background: #ffffff;
}
.cyber-card__bloque {
font-size: 20px;
font-weight: 700;
color: #223C84;
letter-spacing: 0.4px;
margin: 0;
}
.cyber-card__desc {
font-size: 15px;
color: #5C5F66;
line-height: 1.5;
margin: 4px 0 0;
}
/* --- Pie --- */
.cyber-card__footer {
padding: 10px 18px 14px;
background: #ffffff;
display: flex;
align-items: center;
gap: 8px;
}
.cyber-card__readmore {
display: inline-block;
background: #223C84;
color: #fff;
font-size: 11px;
font-weight: 600;
font-style: normal;
padding: 4px 10px;
border-radius: 999px;
margin: 0;
text-align: left;
flex-shrink: 0;
}
.cyber-card__due {
display: inline-block;
background: #EFEFF0;
color: #5C5F66;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
flex-shrink: 0;
}
/* --- Modal --- */
.ivirma-cyber-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
align-items: center;
justify-content: center;
}
.ivirma-cyber-modal.is-open { display: flex; }
.ivirma-cyber-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(14,43,83,0.55);
}
.ivirma-cyber-modal__dialog {
position: relative;
background: #fff;
border-radius: 18px;
width: 900px;
max-width: 95%;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ivirma-cyber-modal__hero {
position: relative;
min-height: 100px;
background: linear-gradient(135deg, #0E2B53 0%, #17417B 100%);
background-size: cover;
background-position: center;
padding: 35px;
color: #fff;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.ivirma-cyber-modal__hero.has-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,83,0.25) 0%, rgba(14,43,83,0.8) 100%);
}
.ivirma-cyber-modal__hero > * { position: relative; z-index: 1; }
.ivirma-cyber-modal__hero-text {
flex: 1;
min-width: 0;
text-align: left;
}
.ivirma-cyber-modal__close {
position: absolute;
padding:20px;
top: 10px;
right: 12px;
left: auto;
background: rgba(255,255,255,0);
border: none;
color: #fff;
font-size: 22px;
width: 28px; height: 28px;
border-radius: 50%;
cursor: pointer;
z-index: 100;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
float: none;
}
.ivirma-cyber-modal__close:hover { background: rgba(255,255,255,0.3); }
.ivirma-cyber-modal__title {
font-size: 22px;
font-weight: 500;
margin: 0 0 3px;
color: #fff;
line-height: 1.2;
text-align: left;
padding-right: 0;
text-shadow: 2px 2px 10px #000000b8;
}
.ivirma-cyber-modal__subtitle {
padding-top: 20px;
font-size: 14px;
font-weight: 500;
opacity: .85;
margin: 0 0 6px;
display: block;
}
.ivirma-cyber-modal__bloque {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
opacity: .8;
display: block;
}
.ivirma-cyber-modal__duration {
display: flex;
align-items: center;
gap: 8px;
background: rgb(3 26 51);
padding: 8px 12px;
border-radius: 8px;
flex-shrink: 0;
align-self: flex-end;
}
.ivirma-cyber-modal__duration svg { width: 30px; height: 30px; flex-shrink: 0; }
.ivirma-cyber-modal__duration-label {
font-size: 10px;
opacity: .8;
text-transform: uppercase;
letter-spacing: .5px;
display: block;
}
.ivirma-cyber-modal__duration-value {
font-size: 14px;
font-weight: 600;
display: block;
}
.ivirma-cyber-modal__body {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 26px;
padding: 20px 20px 0;
overflow-y: auto;
flex: 1;
padding: 45px;
}
.ivirma-cyber-modal__body h3 {
font-size: 18px;
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: #17417B;
margin: 0 0 6px;
}
.ivirma-cyber-modal__body p {
font-size: 15px;
color: #5C5F66;
line-height: 1.55;
margin: 0 0 16px;
}
.ivirma-cyber-modal__fechas { white-space: pre-line; }
.ivirma-cyber-modal__contenidos { display: flex; flex-direction: column; gap: 15px; }
.ivirma-cyber-modal__pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 15px;
border-radius: 999px;
border: none;
background: #223C84 !important;
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: 500;
transition: background 0.15s ease;
}
.ivirma-cyber-modal__pill:hover { background: #1a2f6a; text-decoration: none; color: #fff; }
.ivirma-cyber-modal__pill-text { flex: 1; min-width: 0; }
.ivirma-cyber-modal__pill-min {
display: inline-block;
flex-shrink: 0;
margin-left: 8px;
padding: 2px 8px;
background: rgb(3, 26, 51);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.ivirma-cyber-modal__pill-arrow { color: #fff; font-size: 11px; flex-shrink: 0; }
.ivirma-cyber-modal__col-right {
align-self: end;
}
.ivirma-cyber-modal__col-left h3{
padding-bottom: 10px;
}
.ivirma-cyber-modal__footer {
padding: 20px 35px;
border-top: 1px solid rgba(0,0,0,0.07);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #012246;
margin-top: 16px;
}
.ivirma-cyber-modal__footer-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0 0 2px;
display: block;
}
.ivirma-cyber-modal__footer-sub {
font-size: 11px;
color: #fff;
margin: 0;
display: block;
}
.ivirma-cyber-modal__cta {
display: inline-block;
background: #fff;
color: #012246;
font-size: 16px;
font-weight: 600;
padding: 8px 18px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s ease;
}
.ivirma-cyber-modal__cta:hover { background: #1a2f6a; text-decoration: none; color: #fff; }
@media (max-width: 600px) {
.ivirma-cyber-modal__body { grid-template-columns: 1fr; }
.ivirma-cyber-modal__footer { flex-direction: column; align-items: flex-start; }
}
body.ivirma-cyber-modal-open { overflow: hidden; }
/* --- Animaciones keyframes --- */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes backdropFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ivirma-cyber-modal.is-open .ivirma-cyber-modal__dialog {
animation: modalFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ivirma-cyber-modal.is-open .ivirma-cyber-modal__backdrop {
animation: backdropFadeIn 0.5s ease both;
}
@keyframes modalFadeOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
}
@keyframes backdropFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.ivirma-cyber-modal.is-closing .ivirma-cyber-modal__dialog {
animation: modalFadeOut 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ivirma-cyber-modal.is-closing .ivirma-cyber-modal__backdrop {
animation: backdropFadeOut 0.5s ease both;
}
/* --- .cyber-card__desc--clamp --- */
.cyber-card__desc--clamp {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden !important;
text-overflow: ellipsis;
flex: none !important;
max-height: calc(1.5em * 4);
}
/* --- #dai-grid-cyber, #dai-grid-cyber-aud --- */
#dai-grid-cyber,
#dai-grid-cyber-aud {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
align-items: stretch;
}
#dai-grid-cyber.cols-2,
#dai-grid-cyber-aud.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
#dai-grid-cyber.cols-2,
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-2,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
#dai-grid-cyber.cols-2,
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-2,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: 1fr;
}
}
#dai-grid-cyber > li,
#dai-grid-cyber-aud > li {
display: flex;
flex-direction: column;
}
#dai-grid-cyber.cols-2 .cyber-card__image,
#dai-grid-cyber-aud.cols-2 .cyber-card__image {
height: 160px;
}
#dai-grid-cyber.cols-2 .cyber-card__overlay-title,
#dai-grid-cyber-aud.cols-2 .cyber-card__overlay-title {
font-size: 21px;
}
#dai-grid-cyber .cyber-card__desc,
#dai-grid-cyber-aud .cyber-card__desc {
-webkit-line-clamp: unset;
line-clamp: unset;
}
#dai-grid-cyber .cyber-card__bg:not([style]),
#dai-grid-cyber-aud .cyber-card__bg:not([style]) {
background: linear-gradient(135deg, #0E2B53 0%, #1F5499 60%, #2A6BB8 100%);
filter: none;
transform: none;
}
#dai-grid-cyber .cyber-card__bg[style],
#dai-grid-cyber-aud .cyber-card__bg[style] {
filter: blur(2px);
transform: scale(1.05);
}
#dai-grid-cyber > li,
#dai-grid-cyber-aud > li {
display: flex;
}
#dai-grid-cyber .cyber-card,
#dai-grid-cyber-aud .cyber-card {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
#dai-grid-cyber .cyber-card__body,
#dai-grid-cyber-aud .cyber-card__body {
flex: 1;
display: flex;
flex-direction: column;
}
#dai-grid-cyber .cyber-card__footer,
#dai-grid-cyber-aud .cyber-card__footer {
margin-top: auto;
}
.cyber-card.is-disabled {
cursor: default;
}
/* ============================================================
26. DATA & AI — inst11275
============================================================ */
/* --- Variables DAI --- */
:root {
--dai-primary: #17417B;
--dai-primary-hover: #1F5499;
--dai-primary-light: #E8EEF7;
--dai-primary-dark: #0E2B53;
--dai-text-secondary: #5C5F66;
--dai-text-tertiary: #8A8D94;
--dai-border: rgba(0, 0, 0, 0.08);
--dai-radius-md: 10px;
--dai-radius-lg: 20px;
}
/* --- Header del bloque Totara (inst11275 + inst11341) --- */
#inst11275 .block-header,
#inst11341 .block-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 1.25rem !important;
}
#instance-11275-header,
#instance-11341-header,
#inst11275 .block-title h2,
#inst11341 .block-title h2 {
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-size: 30px !important;
font-weight: 700 !important;
color: #17417B !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.01em !important;
background: transparent !important;
border: none !important;
}
#inst11275 .content.block-content,
#inst11341 .content.block-content {
padding: 0px;
padding-bottom: 50px !important;
}
#region-main .block .content:has(.dai-wrap),
#region-main .block:has(.dai-wrap) > .content,
#region-main .block:has(.dai-wrap),
#region-main .block:has(#ms-grid),
#region-main .block:has(#ms-grid) > .content,
#inst8174,
#inst8174 > .content,
#inst8174 .content.block-content {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.dai-section-title {
font-size: 22px;
font-weight: 500;
color: var(--dai-primary);
margin: 0 0 1.25rem;
letter-spacing: -0.01em;
}
/* --- Selectores (tabs) --- */
.dai-filters {
display: flex;
gap: 10px;
margin-bottom: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1.25rem;
}
.dai-filter-btn {
position: relative;
padding: 9px 22px;
border-radius: 999px;
border: 3px solid var(--dai-primary);
background: transparent;
color: var(--dai-primary);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
cursor: pointer;
outline: none;
transition:
background-color 0.18s ease,
color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.12s ease;
}
.dai-filter-btn:hover:not(.active) {
background: var(--dai-primary-light);
color: var(--dai-primary-dark);
border-color: var(--dai-primary);
border: 3px solid var(--dai-primary);
}
.dai-filter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(23, 65, 123, 0.25);
}
.dai-filter-btn:active:not(.active) {
transform: scale(0.97);
border: 3px solid;
}
.dai-filter-btn.active {
background: linear-gradient(135deg, var(--dai-primary) 0%, var(--dai-primary-dark) 100%);
color: #fff;
border: 3px solid var(--dai-primary-dark);;
}
.dai-filter-btn.active:hover {
background: linear-gradient(135deg, var(--dai-primary-hover) 0%, var(--dai-primary) 100%);
border: 3px solid var(--dai-primary);
}
/* --- Grid de cards --- */
.dai-grid {
display: grid;
gap: 14px;
}
.dai-grid.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dai-grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dai-grid.cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
.dai-grid.cols-2,
.dai-grid.cols-3,
.dai-grid.cols-4 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}
.dai-card {
background: #fff;
border-radius: var(--dai-radius-lg);
border: 0.5px solid var(--dai-border);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
min-height: 240px;
transition:
border-color 0.18s ease,
transform 0.18s ease;
}
.dai-card:hover {
border-color: var(--dai-primary);
transform: translateY(-2px);
}
.dai-card-img {
height: 110px;
position: relative;
display: flex;
align-items: flex-end;
padding: 12px 14px;
}
.dai-card-img.b1 {
background: linear-gradient(135deg, var(--dai-primary-dark) 0%, var(--dai-primary) 100%);
}
.dai-card-img.b2 {
background: linear-gradient(135deg, var(--dai-primary) 0%, var(--dai-primary-hover) 100%);
}
.dai-card-img.b3 {
background: linear-gradient(135deg, var(--dai-primary-hover) 0%, #2A6BB8 100%);
}
.dai-card-title-overlay {
color: #fff;
font-size: 14px;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
line-height: 1.3;
}
.dai-card-body {
padding: 12px 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.dai-card-type {
font-size: 10px;
font-weight: 500;
color: var(--dai-text-tertiary);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.dai-card-name {
font-size: 14px;
font-weight: 500;
color: var(--dai-primary);
margin: 0;
line-height: 1.3;
}
.dai-card-desc {
font-size: 12px;
color: var(--dai-text-secondary);
line-height: 1.45;
flex: 1;
margin: 4px 0 0;
}
.dai-card-meta {
font-size: 10px;
color: var(--dai-text-tertiary);
padding: 10px 14px 12px;
border-top: 0.5px solid var(--dai-border);
margin-top: 8px;
}
/* --- Tags --- */
.dai-pending-tag {
display: inline-block;
background: #FAEEDA;
color: #854F0B;
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
margin-top: 4px;
}
.dai-eu-tag {
display: inline-block;
background: var(--dai-primary-light);
color: var(--dai-primary-dark);
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
margin-top: 4px;
margin-right: 4px;
letter-spacing: 0.3px;
}
/* --- Accesibilidad --- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Fix sticky sidebar --- */
div:has(> #region-main) {
display: flex !important;
}
div:has(> #region-main) > #region-main,
div:has(> #region-main) > #block-region-side-post {
float: none !important;
}
#block-region-side-post {
overflow: visible !important;
}
#inst9796 {
position: sticky !important;
top: 0px;
}
#inst9796.cta-onetech .content.block-content {
position: relative !important;
overflow: hidden !important;
position: sticky;
}
#inst9796.cta-onetech .content.block-content::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image: url("https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/one-tech-sidebar-bg.png") !important;
background-position: center !important;
background-size: cover !important;
filter: blur(8px) !important;
transform: scale(1.05) !important;
z-index: 0 !important;
}
#inst9796.cta-onetech .content.block-content .no-overflow {
position: relative !important;
z-index: 1 !important;
min-height: 82vh !important;
justify-content: center !important;
align-items: center !important;
}
/* --- CTA Catalog & OneTech --- */
.cta-catalog .content.block-content .no-overflow,
.cta-onetech .content.block-content .no-overflow {
display: flex !important;
font-size: 16px !important;
padding: 1em !important;
}
.cta-catalog .content.block-content .no-overflow {
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-end !important;
}
.cta-onetech .content.block-content .no-overflow {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.cta-catalog .content.block-content h2.title,
.cta-onetech .content.block-content h2.title {
color: #fff !important;
margin: 0 0 12px !important;
}
.cta-catalog .content.block-content .btn-dcha a,
.cta-onetech .content.block-content .btn-dcha a {
display: inline-block !important;
border: 1px solid #fff !important;
padding: var(--spacing-small, 8px) 25px !important;
border-radius: 25px !important;
background-color: #fff !important;
color: #2d6874 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background-color 0.25s ease, color 0.25s ease !important;
}
.cta-catalog .content.block-content .btn-dcha a:hover,
.cta-onetech .content.block-content .btn-dcha a:hover {
background-color: rgba(255,255,255,0.12) !important;
color: #fff !important;
text-decoration: none !important;
}
.cta-onetech .onetech-btn {
display: inline-block;
background: #fff !important;
margin-top: 20px !important;
padding: 15px 30px !important;
border-radius: 32px !important;
color: #223C84 !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}
.cta-onetech .onetech-btn:hover {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
transform: scale(1.03) !important;
text-decoration: none !important;
}
/* --- Copilot DAI loader --- */
.dai-copilot-loader {
display: none;
align-items: center;
gap: 10px;
padding: 18px 22px;
color: #17417B;
font-size: 15px;
font-weight: 500;
}
.dai-copilot-loader__spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(23, 65, 123, 0.2);
border-top-color: #17417B;
border-radius: 50%;
animation: dai-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes dai-spin {
to { transform: rotate(360deg); }
}
/* --- Aviso sección sin cursos --- */
.dai-empty-notice {
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 18px 22px;
background: #F0F4FA;
border: 1px solid #D0DCEE;
border-radius: 12px;
color: #17417B;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.dai-empty-notice__icon {
font-size: 20px;
color: #17417B;
flex-shrink: 0;
opacity: 0.7;
}
/* ============================================================
26. CATÁLOGO DE CURSOS
Página: /totara/catalog/index.php
Selector raíz: #page-totara-catalog-index
NOTA: No se toca display/flex/grid de Totara, solo estilos visuales
============================================================ */
#page-totara-catalog-index .tw-catalog__aside {
padding-right: 0px !important;
}
#page-totara-catalog-index .tw-selectRegionPanel {
padding: 8px;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector > div {
margin-left: 0px !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_text {
padding-top: 4px !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary__selector:last-of-type {
align-content: center !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary .tw-catalogResultsCount {
display: flex;
align-items: center;
align-self: center;
margin: auto 26px auto auto;
font-size: 16px;
font-weight: 500;
padding-top: 0;
}
/* Badge del contador real. El JS conserva el contador nativo hasta haber
calculado al menos una cifra fiable; por eso solo se oculta con la clase
ivi-results-badge-ready. */
#page-totara-catalog-index .tw-catalogResultsCount.ivi-results-badge-ready .tw-catalogResultsCount__text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary .tw-catalogResultsCount.ivi-results-badge-ready > div {
display: none;
}
#page-totara-catalog-index .ivi-results-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
box-sizing: border-box;
border-radius: 999px;
background: var(--bg-blue, #DCE6FF);
font-family: var(--font-body, "Noto Sans", sans-serif);
font-size: 13px;
line-height: 1;
color: var(--navy-blue, #08004F);
white-space: nowrap;
transform: translateY(-2px);
}
#page-totara-catalog-index .ivi-results-badge::before {
content: "school";
font-family: "Material Symbols Outlined";
font-size: 17px;
line-height: 1;
color: var(--light-blue, #004DF0);
font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
}
#page-totara-catalog-index .ivi-results-badge__n {
font-weight: 700;
color: var(--light-blue, #004DF0);
}
#page-totara-catalog-index .ivi-results-badge__l {
font-weight: 500;
}
#page-totara-catalog-index .tw-catalogItemNarrow__progress {
display: none !important;
}
/* ── Barra superior de filtro primario ───────────────────────── */
#page-totara-catalog-index .tw-selectRegionPrimary > section:first-of-type {
background: none !important;
box-shadow: none !important;
border: none !important;
}
/* ── Dropdown tipo (Filtro_bloque → "Sección a la que pertenece:") ── */
/* Label encima del selector, en columna */
#page-totara-catalog-index .tw-selectTree {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
#page-totara-catalog-index .tw-selectTree__label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-gray);
text-transform: none !important;
letter-spacing: normal;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 2px 15px !important;
}
#page-totara-catalog-index .tw-selectTree__current {
padding: 6px 14px;
background: var(--color-primary) !important;
color: #fff !important;
border-radius: var(--border-radius-xl) !important;
font-size: 13px;
font-weight: 600;
border: none !important;
transition: background 0.2s;
text-decoration: none !important;
}
#page-totara-catalog-index .tw-selectTree__current:hover {
background: var(--color-secondary-dark) !important;
}
#page-totara-catalog-index .tw-selectTree__expandable {
position: relative;
width: 230px !important;
flex-shrink: 0 !important;
}
#page-totara-catalog-index .tw-selectTree__current {
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
#page-totara-catalog-index .tw-selectTree__option {
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
border: none !important;
width: 100% !important;
min-width: unset !important;
left: 0 !important;
box-sizing: border-box !important;
}
#page-totara-catalog-index .tw-selectTree__list_row_link {
font-size: 12px !important;
line-height: 1.4;
}
#page-totara-catalog-index .tw-selectTree__list_row:hover,
#page-totara-catalog-index .tw-selectTree__list_row.tw-selectTree__active {
background: var(--color-background);
color: var(--color-primary);
font-weight: 600;
}
/* ── Buscador ────────────────────────────────────────────────── */
#page-totara-catalog-index .tw-selectSearchText__field {
display: flex !important;
align-items: center !important;
background: #fff !important;
border: 2px solid transparent;
border-radius: var(--border-radius-xl) !important;
transition: border-color 0.2s, box-shadow 0.2s;
padding: 0 10px !important;
margin-right: 10px !important;
}
#page-totara-catalog-index .tw-selectSearchText__field:focus-within {
border-color: var(--color-primary-light) !important;
box-shadow: 0 0 0 3px rgba(0, 183, 189, 0.15);
background: #fff !important;
}
#page-totara-catalog-index .tw-selectSearchText__field_input {
border: none !important;
background: transparent !important;
outline: none !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 14px;
color: var(--color-primary);
flex: 1;
}
#page-totara-catalog-index .tw-selectSearchText__field_input::placeholder {
color: var(--color-text-light);
}
#page-totara-catalog-index .tw-selectSearchText__field_clear {
display: flex !important;
align-items: center !important;
line-height: 1;
}
.tw-selectSearchText__field_clear .flex-icon {
padding-bottom: 0;
}
/* Botón lupa: círculo perfecto */
#page-totara-catalog-index .tw-selectSearchText__btn {
background: var(--color-primary) !important;
border-radius: 50% !important;
border: none !important;
color: #fff !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s;
}
#page-totara-catalog-index .tw-selectSearchText__btn:hover {
background: var(--color-primary-light) !important;
}
/* ── Toggle vista lista/ficha ────────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemStyleToggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--border-radius-small);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.18);
transition: box-shadow 0.15s, background 0.15s;
}
#page-totara-catalog-index .tw-catalogItemStyleToggle__btn:hover {
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.26);
}
/* ── Sidebar de filtros ──────────────────────────────────────── */
#page-totara-catalog-index .tw-selectRegionPanel {
background: #fff;
border-radius: var(--border-radius-large) !important;
box-shadow: 0 2px 16px rgba(0, 105, 117, 0.09);
overflow: hidden;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading {
padding: 16px 18px 12px;
border-bottom: 1px solid var(--color-gray-border);
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_text {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-gray);
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_clear_link {
font-size: 11px;
color: var(--color-primary-light) !important;
font-weight: 600;
text-decoration: none !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_clear_link:hover {
color: var(--color-primary) !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector {
border-bottom: 1px solid var(--color-gray-border);
}
#page-totara-catalog-index .tw-selectRegionPanel__selector:last-child {
border-bottom: none;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector_header {
padding: 11px 12px !important;
font-size: 11px;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background 0.15s;
cursor: pointer;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector_header:hover {
background: var(--color-background);
}
/* Suprimir el ">" del tema — la flecha la pone el JS */
#page-totara-catalog-index .tw-selectRegionPanel__selector_header::before {
content: none !important;
}
/* Items de filtro */
#page-totara-catalog-index .tw-selectMulti__link {
padding: 7px 18px 7px 26px;
font-size: 13px;
color: var(--color-primary) !important;
text-decoration: none !important;
transition: background 0.15s, padding-left 0.15s;
position: relative;
}
#page-totara-catalog-index .tw-selectMulti__link::before {
content: '';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary-light);
opacity: 0;
transition: opacity 0.15s;
}
#page-totara-catalog-index .tw-selectMulti__link:hover {
background: var(--color-background);
padding-left: 30px;
}
#page-totara-catalog-index .tw-selectMulti__link:hover::before {
opacity: 1;
}
#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link {
background: rgba(0, 183, 189, 0.08);
font-weight: 600;
padding-left: 30px;
}
#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link::before {
opacity: 1;
}
/* ── Tarjetas de cursos ──────────────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemNarrow {
border-radius: var(--border-radius-large) !important;
box-shadow: 0 2px 10px rgba(0, 105, 117, 0.07);
border: 1.5px solid transparent !important;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
overflow: hidden;
}
#page-totara-catalog-index .tw-catalogItemNarrow:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 105, 117, 0.16) !important;
border-color: var(--color-primary-light) !important;
}
#page-totara-catalog-index .tw-catalogItemNarrow__image_ratio_img {
transition: transform 0.3s ease;
}
#page-totara-catalog-index .tw-catalogItemNarrow:hover .tw-catalogItemNarrow__image_ratio_img {
transform: scale(1.05);
}
/* Elementos ocultos en tarjeta */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item.itemtype,
#page-totara-catalog-index .tw-catalogItemNarrow__noprogress {
display: none !important;
}
/* Descripción — oculta en narrow, visible en wide */
#page-totara-catalog-index .tw-catalogItemNarrow__description {
display: none !important;
}
/* Badge tipo — oculto (ver "Elementos ocultos en tarjeta" arriba) */
/* Título */
#page-totara-catalog-index .tw-catalogItemNarrow__title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
line-height: 1.35;
}
/* Metadatos */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group {
/* border-top: 1px solid var(--color-gray-border); */
padding-top: 10px;
margin-top: 8px;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item:not(.itemtype) {
font-size: 12px;
color: var(--color-text-gray);
}
/* Contenido tarjeta */
#page-totara-catalog-index .tw-catalogItemNarrow__content {
padding: var(--gap-4) !important;
}
/* ── Iconos metadatos vista Wide ─────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(3) {
display: none !important;
}
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f017";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f073";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
/* ── Vista Wide: altura contenedor y título ──────────────────── */
#page-totara-catalog-index .tw-catalogItemWide__content_left {
height: 150px;
}
#page-totara-catalog-index .tw-catalogItemWide__ellipsis {
padding: 2px 30px 10px 20px;
font-size: 18px;
color: var(--color-title-catalog-box);
}
/* ── Resumen en tarjeta Wide ─────────────────────────────────── */
#page-totara-catalog-index .neo-wide-summary {
font-size: 12px;
color: var(--color-text-gray);
line-height: 1.45;
margin: 5px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Botón "Carga más" ───────────────────────────────────────── */
#page-totara-catalog-index .tw-catalogPagination {
display: flex !important;
justify-content: center !important;
}
#page-totara-catalog-index .tw-catalogPagination__btn {
padding: 12px 40px !important;
background: transparent !important;
color: var(--color-primary) !important;
border: 2px solid var(--color-primary) !important;
border-radius: var(--border-radius-xl) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
}
#page-totara-catalog-index .tw-catalogPagination__btn:hover {
background: var(--color-primary) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(0, 105, 117, 0.25) !important;
}
/* ── Panel detalle tarjeta ───────────────────────────────────── */
#page-totara-catalog-index .tw-catalogDetails__content {
border-radius: var(--border-radius-large) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
border: none !important;
}
/* ============================================================
CATÁLOGO — ajustes finos SOBRE el estilo base de arriba. Los
selectores llevan prefijo `body` (más especificidad) y van DESPUÉS
del bloque base, así ganan a sus reglas !important.
Cambios: radio 10px, borde visible como el sidebar + sombra sutil,
filtro seleccionado en azul (antes salmón), filtros más compactos,
iconos de meta y toggle cuadrícula/lista como Material Symbols.
============================================================ */
/* --- Tarjetas: radio 10px, borde visible (como el sidebar) + sombra --- */
body#page-totara-catalog-index .tw-catalogItemNarrow {
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
box-shadow: 0 1px 3px rgba(8, 0, 79, 0.06) !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow:hover {
transform: scale(1.03) !important; /* la caja se agranda */
border-color: var(--teal, #0CE3C6) !important; /* borde teal */
box-shadow: 0 8px 22px rgba(8, 0, 79, 0.12) !important;
z-index: 1 !important; /* queda por encima de las vecinas */
}
/* Título navy · meta gris · iconos de meta en azul corporativo */
body#page-totara-catalog-index .tw-catalogItemNarrow__title,
body#page-totara-catalog-index .tw-catalogItemNarrow__title .tw-catalogItemNarrow__ellipsis {
color: var(--navy-blue, #08004F) !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.3 !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item {
color: var(--text-gray, #8A8A9E) !important;
font-size: 13px !important;
}
/* Iconos de meta como MATERIAL SYMBOLS (el organizado los pone en Font
Awesome más arriba: narrow §7 y wide §26). Sobrescribimos fuente, peso y
glifo; reloj = schedule, calendario = calendar_month. Cubre las DOS vistas:
fichas (Narrow) y listado (Wide) — la Wide no lleva el wrapper
__textarea_group, por eso su selector es directo. */
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
font-family: 'Material Symbols Outlined' !important;
font-weight: normal !important;
font-size: 16px !important;
line-height: 1 !important;
vertical-align: middle !important;
margin-right: 5px !important;
color: var(--light-blue, #004DF0) !important;
font-feature-settings: 'liga' !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before {
content: 'schedule' !important; /* Duración → reloj */
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
content: 'calendar_month' !important; /* Fecha → calendario */
}
/* --- Sidebar: radio 10px + borde como las tarjetas (mantiene su sombra) --- */
body#page-totara-catalog-index .tw-selectRegionPanel {
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
}
/* Filtros más pequeños/compactos (quedaban grandes) */
body#page-totara-catalog-index .tw-selectRegionPanel__heading_text { font-size: 12px !important; }
body#page-totara-catalog-index .tw-selectRegionPanel__selector_header {
font-size: 11px !important;
padding: 8px 12px !important;
}
body#page-totara-catalog-index .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectTree__list_row_link {
font-size: 12px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Texto de las opciones de filtro → #4A4A63 (el seleccionado sigue en azul,
que se define más abajo con mayor especificidad / orden). */
body#page-totara-catalog-index .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectMulti__link_text,
body#page-totara-catalog-index .tw-selectTree__list_row_link {
color: #4A4A63 !important;
}
/* --- Filtro SELECCIONADO → azul corporativo marcado (antes salmón
#fcefec del organizado:2830). Cubre las tres variantes de estado. --- */
body#page-totara-catalog-index .tw-selectMulti__link_active,
body#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectTree__list_row.tw-selectTree__active {
background: rgba(0, 77, 240, 0.10) !important;
color: var(--light-blue, #004DF0) !important;
font-weight: 600 !important;
}
/* Punto y "×" del item seleccionado, en azul */
body#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link::before {
background: var(--light-blue, #004DF0) !important;
opacity: 1 !important;
}
body#page-totara-catalog-index .tw-selectMulti__link_close {
color: var(--light-blue, #004DF0) !important;
}
/* --- "Filtrar por sección" (botón "Todos", .tw-selectTree__current):
light blue y más alto. La regla base ya lo pone en --color-primary
(light blue); este override sube el padding y fuerza el color de marca
(antes estaba en teal, 2026-09-03). Texto/flecha en blanco para contraste. --- */
body#page-totara-catalog-index .tw-selectTree__current {
background: var(--light-blue, #004DF0) !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
color: #fff !important; /* texto blanco sobre light blue */
}
body#page-totara-catalog-index .tw-selectTree__current:hover {
background: var(--blue-hover, #0038C4) !important; /* light blue un punto más oscuro */
color: #fff !important;
}
/* Etiqueta ("Todos") y flecha del botón → blanco */
body#page-totara-catalog-index .tw-selectTree__current_label,
body#page-totara-catalog-index .tw-selectTree__current_icon {
color: #fff !important;
fill: #fff !important;
}
/* --- Buscador (.tw-selectSearchText__field): borde visible, un poco más
ancho y padding en el input para que el texto no se corte por la derecha.
El organizado lo deja con borde transparente y el input sin padding
(css-totara-organizado.css:5905-5931). --- */
body#page-totara-catalog-index .tw-selectSearchText__field {
border: 1px solid #E2E8F0 !important; /* antes 2px transparente */
min-width: 300px !important; /* más ancho */
padding: 0 14px !important;
}
body#page-totara-catalog-index .tw-selectSearchText__field_input {
padding: 0 10px !important; /* aire: el texto ya no se corta */
}
/* --- Grupos de filtro ABIERTOS sin recorte de la última opción. El JS de
colapso pone un `max-height` inline (a veces corto) + `overflow:hidden`,
que corta el último item. Quitamos el límite SOLO a los abiertos: los
cerrados llevan `max-height: 0px` inline y se dejan tal cual para que el
colapso siga funcionando (se pierde la animación suave, no la función). --- */
body#page-totara-catalog-index .tw-selectMulti[style*="max-height"]:not([style*="max-height: 0px"]) {
max-height: none !important;
}
/* --- Toggle cuadrícula/lista (.tw-catalogItemStyleToggle) con iconos
MATERIAL. El tema usa flex-icons (tfont-var-grid-fill); los ocultamos y
ponemos glifos Material: --narrow = grid_view, --wide = view_list.
Activo (btn_active, fondo azul) → icono blanco; inactivo → gris. --- */
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn .flex-icon,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn .flex-icon svg,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn > svg,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn > img {
display: none !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn::before {
display: inline-block !important;
font-family: 'Material Symbols Outlined' !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 20px !important;
line-height: 1 !important;
color: #6B7280 !important; /* inactivo: gris */
letter-spacing: normal !important; /* no romper la ligadura */
text-transform: none !important; /* no romper la ligadura */
font-feature-settings: 'liga' !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn--narrow::before { content: 'grid_view' !important; }
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn--wide::before { content: 'view_list' !important; }
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn_active::before { color: #fff !important; } /* activo: blanco */
/* Fondo y borde de los botones: inactivo blanco, activo azul corporativo,
ambos con la línea de las cards (#E2E8F0). Quitamos la sombra dura del
organizado (css-totara-organizado.css:5975). */
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn {
background: #fff !important;
border: 1px solid #E2E8F0 !important;
box-shadow: none !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn:hover {
box-shadow: none !important;
border-color: #CBD5E1 !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn_active {
background: var(--light-blue, #004DF0) !important;
}
/* ============================================================
EXPEDIENTE — Cursos como cards (rebranding IVI 2026)
El modulo expediente/expediente-script.html reutiliza los estilos
globales .dai-filters / .dai-empty-notice; las tabs se re-tematizan
dentro de .exp-filters. Paleta nueva: variables de la guía (seccion 1.1).
============================================================ */
/* Títulos de bloque del dashboard Expediente (dashboard-16):
tipografía principal IVI Glance en azul marino */
#page-totara-dashboard-16 .block .block-title h2,
#page-totara-dashboard-16 .block .header .title h2 {
font-family: var(--font-title);
color: var(--navy-blue);
font-weight: 500;
font-size: 2.4rem;
}
/* Fila de badges dentro de la card */
.exp-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
}
.exp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
padding: 7px 12px;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.exp-badge i {
font-size: 12px;
}
/* Tipo de curso — pastilla azul claro con texto azul de marca */
.exp-badge--type {
background: var(--bg-blue, #DCE6FF);
color: var(--light-blue, #004DF0);
}
/* Fecha de inscripción — texto gris sin pastilla */
.exp-badge--enrol {
background: transparent;
color: var(--text-gray, #8A8A9E);
font-weight: 500;
padding-left: 0;
padding-right: 0;
}
/* Finalizado — turquesa con texto azul marino */
.exp-badge--end {
background: var(--teal, #0CE3C6);
color: var(--navy-blue, #08004F);
}
/* En curso / pendiente — gris suave */
.exp-badge--pending {
background: var(--track-beige, #ECE9E2);
color: var(--text-gray, #8A8A9E);
}
/* Barra de progreso al pie de la card */
.exp-progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
.exp-progress__track {
flex: 1;
height: 7px;
background: var(--track-beige, #ECE9E2);
border-radius: 999px;
overflow: hidden;
}
.exp-progress__fill {
height: 100%;
background: var(--teal, #0CE3C6);
border-radius: 999px;
transition: width 0.3s ease;
}
.exp-progress__label {
font-size: 13px;
font-weight: 700;
color: var(--navy-blue, #08004F);
white-space: nowrap;
}
/* Completado: turquesa con etiqueta azul marino (igual que en curso) */
.exp-progress--done .exp-progress__fill { background: var(--teal, #0CE3C6); }
.exp-progress--done .exp-progress__label { color: var(--navy-blue, #08004F); }
/* No superada: barra y texto en rojo */
.exp-progress--failed .exp-progress__fill { background: #c0392b; }
.exp-progress--failed .exp-progress__label { color: #c0392b; }
/* El grid del Expediente usa el base .cyber-standalone__grid: 3 columnas
(2 en ≤900px, 1 en ≤600px). Ver rediseño 2026 más abajo. */
/* --- Card del expediente (autónoma, no depende de .cyber-card) --- */
.exp-card {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(8, 0, 79, 0.06);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
font-family: var(--font-body);
box-shadow: var(--shadow-soft);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.exp-card:hover {
border-color: var(--light-blue, #004DF0);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 77, 240, 0.12), 0 2px 4px rgba(8, 0, 79, 0.06);
text-decoration: none;
color: inherit;
}
/* Imagen a sangre completa. Si el curso no tiene imagen queda el
gradiente azul→menta de marca con un icono como placeholder. */
.exp-card__image {
position: relative;
height: 190px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-blue, #DCE6FF) 0%, var(--bg-mint, #EAF6F3) 100%);
flex-shrink: 0;
}
.exp-card__bg {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Icono placeholder centrado (se oculta cuando llega la imagen real) */
.exp-card__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: rgba(0, 77, 240, 0.28);
pointer-events: none;
}
.exp-card--has-image .exp-card__icon {
display: none;
}
/* Cuerpo de la card: título + badges + progreso */
.exp-card__body {
padding: 18px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
background: #ffffff;
}
.exp-card__title {
display: block;
color: var(--navy-blue, #08004F);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
/* Estado (Finalizado / En curso / No superada) sobre la imagen */
.exp-status {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
padding: 7px 12px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(8, 0, 79, 0.14);
white-space: nowrap;
}
.exp-status i { font-size: 11px; }
.exp-status--done { background: var(--teal, #0CE3C6); color: var(--navy-blue, #08004F); }
.exp-status--pending { background: #ffffff; color: var(--navy-blue, #08004F); }
.exp-status--failed { background: #c0392b; color: #ffffff; }
/* Aviso "sin formaciones" en azul de marca */
.dai-empty-notice--corp {
background: var(--bg-blue, #DCE6FF);
border-color: #C4D4FB;
color: var(--navy-blue, #08004F);
}
.dai-empty-notice--corp .dai-empty-notice__icon {
color: var(--light-blue, #004DF0);
}
/* Tabs del expediente re-tematizadas: pastillas blancas con borde fino
y activa en azul marino sólido (sin gradiente). Acotado a .exp-filters
para no afectar a las tabs one-tech. */
.exp-filters {
--dai-primary: var(--navy-blue, #08004F);
--dai-primary-hover: var(--light-blue, #004DF0);
--dai-primary-light: var(--bg-blue, #DCE6FF);
--dai-primary-dark: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 11px 24px;
border: 1px solid var(--border-soft, #E4E2EE);
background: #ffffff;
color: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn:hover:not(.active) {
border: 1px solid #C4D4FB;
background: var(--bg-blue, #DCE6FF);
color: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn:active:not(.active) {
border: 1px solid #C4D4FB;
}
.exp-filters .dai-filter-btn.active,
.exp-filters .dai-filter-btn.active:hover {
background: var(--navy-blue, #08004F);
border: 1px solid var(--navy-blue, #08004F);
color: #ffffff;
}
.exp-filters .dai-filter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 77, 240, 0.25);
}
/* ------------------------------------------------------------
Expediente 2026 — rediseño de las cards. Todo acotado a #exp-grid
para NO afectar a Monthly Seminars (#ms-grid), que reutiliza .exp-*.
Incluye: título compacto, imagen más alta, color por estado
(badge = barra), badge de recuento en las tabs y paginación cliente.
Los 4 estados: Finalizada / En curso / No iniciada (progreso 0) /
No superada.
------------------------------------------------------------ */
/* Título compacto, sin negrita */
#exp-grid .exp-card__title {
font-size: 13.5px;
font-weight: 500;
line-height: 1.3;
}
/* Encuadre: mostrar la parte superior de la foto (retratos) */
#exp-grid .exp-card__bg {
background-position: center 20%;
}
/* La imagen ocupa más alto y absorbe el espacio sobrante de la card:
en las cards con título corto crece en vez de dejar hueco blanco. */
#exp-grid .exp-card__image {
height: auto;
min-height: 230px;
flex: 1 0 auto;
}
#exp-grid .exp-card__body {
flex: 0 0 auto;
}
/* Color por estado: el badge y la barra comparten color, alineados con
la paleta del donut de estado-cursos. */
#exp-grid .exp-status--done { background: var(--navy-blue, #08004F); color: #ffffff; }
#exp-grid .exp-status--pending { background: var(--teal, #0CE3C6); color: var(--navy-blue, #08004F); }
#exp-grid .exp-status--notstarted { background: var(--light-blue, #004DF0); color: #ffffff; }
#exp-grid .exp-status--failed { background: var(--red, #B4084A); color: #ffffff; }
#exp-grid .exp-progress--done .exp-progress__fill { background: var(--navy-blue, #08004F); }
#exp-grid .exp-progress--encurso .exp-progress__fill { background: var(--teal, #0CE3C6); }
#exp-grid .exp-progress--noiniciada .exp-progress__fill { background: var(--light-blue, #004DF0); }
#exp-grid .exp-progress--failed .exp-progress__fill { background: var(--red, #B4084A); }
#exp-grid .exp-progress--failed .exp-progress__label { color: var(--red, #B4084A); }
/* Badge blanco con el nº de cursos dentro de cada botón del selector.
(.exp-filters .dai-filter-btn ya es inline-flex con gap, más arriba.) */
.exp-filters .dai-filter-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1px solid var(--border-soft, #E4E2EE);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
/* En la pestaña activa (fondo navy) el badge blanco resalta con texto navy */
.exp-filters .dai-filter-btn.active .dai-filter-btn__count {
border-color: #ffffff;
}
/* Paginación cliente de las cards (misma pauta que la de PNTs) */
.exp-pagination {
display: flex;
justify-content: center;
padding: 8px 4px 4px;
margin-top: 8px;
}
.exp-pagination__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 6px;
flex-wrap: wrap;
}
.exp-pagination__item a {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1.5px solid var(--border-soft, #E4E2EE);
background: var(--white, #fff);
color: var(--navy-blue, #08004F);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.15s ease;
cursor: pointer;
}
.exp-pagination__item a:hover {
border-color: var(--light-blue, #004DF0);
color: var(--light-blue, #004DF0);
}
.exp-pagination__item.active a {
background: var(--light-blue, #004DF0);
border-color: var(--light-blue, #004DF0);
color: var(--white, #fff);
}
.exp-pagination__item.disabled a {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
ESTADO DE MIS CURSOS (inst8161): donut + leyenda con barras
Generado por expediente/estado-cursos.html — rebranding IVI 2026
============================================================ */
/* Card contenedora en crema, a ancho completo */
.status-chart {
display: flex;
align-items: center;
width: 100%;
background: var(--warm-gray, #FAF4EE);
border-radius: 14px;
border: 1px solid rgba(8, 0, 79, 0.05);
box-shadow: var(--shadow-soft);
padding: 28px 32px;
font-family: var(--font-body);
}
.status-chart__donut {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
flex-shrink: 0;
cursor: pointer;
}
/* Tooltip al pasar el ratón sobre un segmento del donut */
.status-chart__tip {
position: absolute;
z-index: 5;
transform: translate(-50%, -135%);
background: var(--navy-blue, #08004F);
color: #ffffff;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.status-chart__tip-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
/* Agujero del anillo */
.status-chart__donut::after {
content: "";
position: absolute;
inset: 22px;
background: #ffffff;
border-radius: 50%;
}
.status-chart__center {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.status-chart__total {
font-size: 40px;
font-weight: 800;
line-height: 1;
color: var(--navy-blue, #08004F);
}
.status-chart__total-label {
font-size: 13px;
color: var(--text-gray, #8A8A9E);
margin-top: 3px;
}
/* Tabla descriptiva junto al donut (ocupa el resto del ancho) */
.status-chart__panel {
flex: 1;
min-width: 0;
margin-left: 40px;
}
.status-chart__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--navy-blue, #08004F);
}
.status-chart__th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gray, #8A8A9E);
text-align: left;
padding: 0 16px 10px;
border-bottom: 1px solid #EAE5DA;
white-space: nowrap;
}
.status-chart__th:first-child { padding-left: 0; }
.status-chart__th--num { text-align: right; }
.status-chart__cell {
padding: 11px 16px;
border-bottom: 1px solid #F1ECE2;
white-space: nowrap;
color: var(--navy-blue, #08004F);
}
.status-chart__cell:first-child { padding-left: 0; }
/* Barra horizontal por estado (ancho proporcional, color del estado) */
.status-chart__cell--bar {
width: 48%;
}
.status-chart__bar {
display: block;
height: 8px;
min-width: 26px;
border-radius: 999px;
}
.status-chart__cell--num {
text-align: right;
font-weight: 700;
color: var(--navy-blue, #08004F);
}
.status-chart__cell--pct {
text-align: right;
color: var(--text-gray, #8A8A9E);
}
.status-chart__row:last-child .status-chart__cell { border-bottom: none; }
.status-chart__foot .status-chart__cell {
border-top: 1.5px solid #E3DCCE;
border-bottom: none;
font-weight: 700;
color: var(--navy-blue, #08004F);
}
/* En pantallas estrechas el donut y la tabla se apilan */
@media (max-width: 767px) {
.status-chart {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.status-chart__panel { margin-left: 0; width: 100%; }
.status-chart__cell--bar { width: 30%; }
}
/* ============================================================
MIS CERTIFICADOS (block_mycertificates): miniatura + botones
Generado por expediente/mis-certificados.html — rebranding IVI 2026
============================================================ */
/* Contenedor compartido por las Homes interna (#inst237) y externa
(#inst354): fondo warm gray y acabado de tarjeta del sistema. */
.block_mycertificates .content.block-content {
background: var(--warm-gray, #FAF4EE) !important;
border: 1px solid var(--border-soft, #E4E2EE) !important;
border-radius: 14px !important;
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
padding: 24px !important;
font-family: var(--font-body);
}
.block_mycertificates .mycertificates.row {
margin: 0 !important;
row-gap: 24px;
}
.block_mycertificates .certificateitem {
text-align: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.block_mycertificates .certificateitem img.img-responsive {
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 1px 6px rgba(8, 0, 79, 0.16);
}
.mycertificates.row .certificateitem img {
max-width: 150px !important;
}
/* "Descarga tu certificado" (.certificatename) es un texto genérico
redundante con el botón: se oculta EN CUALQUIER contexto (bloque de las
homes, list.php, o donde aparezca), conservando la miniatura si el plugin
la mete dentro (caso list.php). Consolida las antiguas reglas acotadas. */
.certificatename {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
/* Colapsa cualquier hijo de texto/enlace ("Descarga tu certificado"), que
puede traer su propio font-size/line-height y dejaría hueco entre la
miniatura y el título. La imagen se restaura en la regla de abajo. */
.certificatename *:not(img) {
font-size: 0 !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Miniatura visible (list.php la mete dentro de .certificatename), como
bloque centrado para no dejar el hueco de línea base de las imágenes. */
.certificatename img {
font-size: initial !important;
line-height: normal !important;
display: block !important;
margin: 0 auto !important;
}
.block_mycertificates .coursename {
font-size: 13px;
font-weight: 600;
color: var(--navy-blue, #08004F);
line-height: 1.3;
margin-top: 8px;
}
.cert-actions {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 8px !important;
margin-top: 12px !important;
}
.cert-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
margin: 0 !important;
font-size: 12.5px;
font-weight: 600;
padding: 8px 15px;
border: none;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
font-family: var(--font-body);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cert-btn i { font-size: 12px; }
/* "Ver": pastilla azul marino */
.cert-btn--view {
background: var(--navy-blue, #08004F);
color: #ffffff;
}
.cert-btn--view:hover {
background: var(--navy-hover, #1D146F);
color: #ffffff;
text-decoration: none;
}
/* "Descargar": pastilla blanca con borde fino */
.cert-btn--download {
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1px solid var(--border-soft, #E4E2EE);
}
.cert-btn--download:hover {
background: var(--bg-blue, #DCE6FF);
border-color: #C4D4FB;
color: var(--navy-blue, #08004F);
text-decoration: none;
}
/* --- Certificados rediseño 2026-07-13 (los botones los genera el
script "JS: Mis certificados" con el sistema .ivi-btn) --- */
/* Botonera sin desplazamientos en hover */
.cert-actions .ivi-btn {
margin: 0 !important;
flex: 0 1 auto;
}
.cert-actions .ivi-btn:hover,
.cert-actions .ivi-btn:active {
transform: none !important;
}
/* "Descargar": estados FIJOS en reposo y hover (mismo borde de 2px
siempre → sin saltos), cubriendo la clase nueva (ivi-btn--ghost)
y la vieja (cert-btn--download) por si corre el script anterior */
.cert-actions .ivi-btn--ghost,
.cert-actions .cert-btn--download {
background: #fff !important;
border: 2px solid var(--border-soft, #E3E3E3) !important;
color: var(--navy-blue, #08004F) !important;
transform: none !important;
box-shadow: none !important;
}
.cert-actions .ivi-btn--ghost:hover,
.cert-actions .ivi-btn--ghost:focus,
.cert-actions .cert-btn--download:hover,
.cert-actions .cert-btn--download:focus {
background: var(--bg-blue, #DCE6FF) !important;
border: 2px solid #C4D4FB !important; /* trazo visible sobre el azul */
color: var(--navy-blue, #08004F) !important;
transform: none !important;
box-shadow: none !important;
}
/* "Ver todo" del bloque de certificados (a.seeall, botón NATIVO del
plugin, no lo genera nuestro script): look de botón primario ivi */
.block_mycertificates a.seeall {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-title, 'IVI Glance', 'Noto Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 400 !important;
background: var(--light-blue, #004DF0) !important;
color: #fff !important;
border: 2px solid var(--light-blue, #004DF0) !important;
border-radius: 999px !important;
padding: 10px 24px !important;
text-decoration: none !important;
transition: background-color .2s ease, color .2s ease;
}
.block_mycertificates a.seeall:hover {
background: #fff !important;
color: var(--light-blue, #004DF0) !important;
border-color: var(--light-blue, #004DF0) !important;
}
/* "Ver todo" centrado y separado de la cuadrícula de certificados */
.block_mycertificates .text-right:has(.seeall) {
text-align: center;
margin-top: 28px;
}
@media (max-width: 767px) {
.block_mycertificates .content.block-content {
padding: 18px !important;
}
}
/* ------------------------------------------------------------
Rejilla de 4 columnas + página de listado (list.php) — 2026
Mismo diseño en el BLOQUE (homes interna/externa) y en la PÁGINA
/blocks/mycertificates/list.php. La miniatura del PDF y los botones
Ver/Descargar los inyecta el módulo de additional-html-footer.js.
NOTA: #page-blocks-mycertificates-list es el id del
de la
página de listado; si al inspeccionar ves otro id, sustitúyelo.
------------------------------------------------------------ */
/* Rejilla de 4 columnas (bloque + listado) */
.block_mycertificates .mycertificates.row,
#page-blocks-mycertificates-list .mycertificates.row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.block_mycertificates .certificateitem,
#page-blocks-mycertificates-list .certificateitem {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 0 0 25% !important;
width: 25% !important;
max-width: 25% !important;
padding-right: 12px !important;
padding-left: 12px !important;
}
.block_mycertificates .certificateitem > a,
#page-blocks-mycertificates-list .certificateitem > a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
color: var(--navy-blue, #08004F) !important;
text-decoration: none !important;
}
/* Nombre del curso a 2 líneas (mantiene el tamaño/peso de arriba) */
.block_mycertificates .coursename,
#page-blocks-mycertificates-list .coursename {
display: -webkit-box !important;
min-height: 2.6em !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
/* Botonera pegada abajo para alinear tarjetas de distinta altura */
.block_mycertificates .cert-actions,
#page-blocks-mycertificates-list .cert-actions {
margin-top: auto !important;
padding-top: 12px !important;
}
/* En el BLOQUE de las homes solo se muestran los 4 primeros (el resto,
con "Ver todo" → list.php). En list.php NO se limita: se ven todos. */
.block_mycertificates .mycertificates.row > .certificateitem:nth-child(n + 5) {
display: none !important;
}
/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 991px) {
.block_mycertificates .certificateitem,
#page-blocks-mycertificates-list .certificateitem {
flex-basis: 50% !important;
width: 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 575px) {
.block_mycertificates .certificateitem,
#page-blocks-mycertificates-list .certificateitem {
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* --- Específico de la PÁGINA de listado (list.php) --- */
/* Página en BLANCO (antes iba warm gray entera); solo el bloque de
contenido va warm gray, como tarjeta (ver regla de [role="main"]). */
#page-blocks-mycertificates-list {
background-color: #fff !important;
}
/* #region-main transparente: deja ver el blanco alrededor de la tarjeta */
#page-blocks-mycertificates-list #region-main,
#page-blocks-mycertificates-list #region-main .card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* El contenido pasa a ser la TARJETA warm gray con esquinas redondeadas
(mismo acabado que .block_mycertificates .content.block-content). */
#page-blocks-mycertificates-list #region-main [role="main"] {
background: var(--warm-gray, #FAF4EE) !important;
border: 1px solid var(--border-soft, #E4E2EE) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05)) !important;
padding: 24px !important;
margin: 8px 0 32px !important;
font-family: var(--font-body);
}
/* ============================================================
27. SISTEMA DE BOTONES — .ivi-btn (reutilizable)
============================================================
Botón unificado para todo el campus. Consolida las variantes
que estaban repartidas y con estilos distintos (.btn-banner,
.cta-catalog .btn-dcha, .dai-filter-btn, .cert-btn, .btn-info,
.onetech-btn, .seeall, .carousel-btn...). Referencia la paleta
de marca de la sección 1.1.
USO — combinar la base con un color y, opcionalmente, tamaño/forma:
Aceptar
Ver catálogo (sobre fondo de color)
…
COLORES: --primary --secondary --navy --outline --ghost
--white --link --success --danger --warning
TAMAÑOS: --sm (defecto) --lg
FORMA: --pill --block --icon --elevated
ESTADOS: :hover :active :focus-visible :disabled / .is-disabled
============================================================ */
/* --- 27.1 Tokens del componente --- */
:root {
--btn-radius: 8px;
--btn-radius-pill: 999px;
--btn-pad-y: 12px;
--btn-pad-x: 26px;
--btn-font-size: 15px;
--btn-font-weight: 400; /* IVI Glance solo existe en regular; sin bold */
--btn-gap: 8px;
--btn-border: 2px;
--btn-transition: background-color .2s ease, color .2s ease,
border-color .2s ease, box-shadow .2s ease,
transform .15s ease;
--btn-focus-ring: 0 0 0 3px rgba(0, 77, 240, .30);
/* Hover del teal (no existía como token; el teal de marca es muy claro) */
--teal-hover: #0BCBB1;
}
/* --- 27.2 Base --- */
.ivi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
padding: var(--btn-pad-y) var(--btn-pad-x);
border: var(--btn-border) solid transparent;
border-radius: var(--btn-radius);
background: none;
font-family: var(--font-title); /* IVI Glance (regular), fallback Noto Sans */
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: 1.2;
letter-spacing: .2px;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: var(--btn-transition);
-webkit-appearance: none;
appearance: none;
}
.ivi-btn:hover,
.ivi-btn:focus { text-decoration: none; }
.ivi-btn:active { transform: translateY(1px); }
.ivi-btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
.ivi-btn:disabled,
.ivi-btn.is-disabled {
opacity: .5;
cursor: not-allowed;
transform: none;
box-shadow: none;
pointer-events: none;
}
/* El botón va siempre en IVI Glance regular: neutralizar /
que cuele el editor (la fuente no tiene bold; el navegador lo
sintetizaría y quedaría empastado). */
.ivi-btn b,
.ivi-btn strong { font-weight: 400; }
/* Iconos dentro del botón (Font Awesome o SVG) */
.ivi-btn i,
.ivi-btn svg { font-size: 1em; flex: 0 0 auto; }
/* Material Symbols dentro del botón (iconografía del rebranding).
El helper de Google Fonts los pone a 24px; los reajustamos al botón. */
.ivi-btn .material-symbols-outlined,
.ivi-btn .material-symbols-rounded,
.ivi-btn .material-symbols-sharp {
font-size: 20px;
line-height: 1;
flex: 0 0 auto;
}
.ivi-btn--sm .material-symbols-outlined,
.ivi-btn--sm .material-symbols-rounded,
.ivi-btn--sm .material-symbols-sharp { font-size: 18px; }
.ivi-btn--lg .material-symbols-outlined,
.ivi-btn--lg .material-symbols-rounded,
.ivi-btn--lg .material-symbols-sharp { font-size: 24px; }
.ivi-btn--icon .material-symbols-outlined,
.ivi-btn--icon .material-symbols-rounded,
.ivi-btn--icon .material-symbols-sharp { font-size: 24px; }
/* --- 27.3 Variantes de color ---
Convención de hover: el hover INVIERTE el diseño (se intercambian relleno
y texto). El `color` lleva !important porque el tema de Totara colorea
todos los enlaces () con un selector de altísima especificidad que, si
no, pisaría el texto del botón. */
/* Primario: azul de marca sólido → hover blanco con texto azul */
.ivi-btn--primary {
background: var(--light-blue);
color: #fff !important;
border-color: var(--light-blue);
}
.ivi-btn--primary:hover,
.ivi-btn--primary:focus {
background: #fff;
color: var(--light-blue) !important;
border-color: var(--light-blue);
}
/* Secundario: teal → hover teal oscuro con texto teal */
.ivi-btn--secondary {
background: var(--teal);
color: var(--deep-teal) !important;
border-color: var(--teal);
}
.ivi-btn--secondary:hover,
.ivi-btn--secondary:focus {
background: var(--deep-teal);
color: var(--teal) !important;
border-color: var(--deep-teal);
}
/* Navy: azul oscuro → hover blanco con texto navy */
.ivi-btn--navy {
background: var(--navy-blue);
color: #fff !important;
border-color: var(--navy-blue);
}
.ivi-btn--navy:hover,
.ivi-btn--navy:focus {
background: #fff;
color: var(--navy-blue) !important;
border-color: var(--navy-blue);
}
/* Outline: contorno azul, fondo transparente → hover relleno azul sólido */
.ivi-btn--outline {
background: transparent;
color: var(--light-blue) !important;
border-color: var(--light-blue);
}
.ivi-btn--outline:hover,
.ivi-btn--outline:focus {
background: var(--light-blue);
color: #fff !important;
border-color: var(--light-blue);
}
/* Ghost: blanco con borde suave → hover relleno navy */
.ivi-btn--ghost {
background: var(--white);
color: var(--navy-blue) !important;
border-color: var(--border-soft);
}
.ivi-btn--ghost:hover,
.ivi-btn--ghost:focus {
background: var(--navy-blue);
color: #fff !important;
border-color: var(--navy-blue);
}
/* White / inverso (para fondos de color u oscuros) → hover relleno azul */
.ivi-btn--white {
background: #fff;
color: var(--light-blue) !important;
border-color: #fff;
}
.ivi-btn--white:hover,
.ivi-btn--white:focus {
background: var(--light-blue);
color: #fff !important;
border-color: var(--light-blue);
}
/* Link: solo texto (excepción: no invierte, solo subraya) */
.ivi-btn--link {
background: transparent;
color: var(--light-blue) !important;
border-color: transparent;
padding-left: 6px;
padding-right: 6px;
}
.ivi-btn--link:hover,
.ivi-btn--link:focus {
color: var(--blue-hover) !important;
text-decoration: underline;
}
/* Semánticos */
.ivi-btn--success {
background: var(--success);
color: var(--deep-teal) !important;
border-color: var(--success);
}
.ivi-btn--success:hover,
.ivi-btn--success:focus {
background: var(--deep-teal);
color: var(--success) !important;
border-color: var(--deep-teal);
}
.ivi-btn--danger {
background: var(--danger);
color: #fff !important;
border-color: var(--danger);
}
.ivi-btn--danger:hover,
.ivi-btn--danger:focus {
background: #fff;
color: var(--danger) !important;
border-color: var(--danger);
}
.ivi-btn--warning {
background: var(--warning);
color: #fff !important;
border-color: var(--warning);
}
.ivi-btn--warning:hover,
.ivi-btn--warning:focus {
background: #fff;
color: var(--warning) !important;
border-color: var(--warning);
}
/* --- 27.4 Tamaños --- */
.ivi-btn--sm {
padding: 8px 16px;
font-size: 13px;
gap: 6px;
}
.ivi-btn--lg {
padding: 15px 32px;
font-size: 17px;
gap: 10px;
}
/* --- 27.5 Forma y disposición --- */
.ivi-btn--pill { border-radius: var(--btn-radius-pill); }
.ivi-btn--block { display: flex; width: 100%; }
.ivi-btn--elevated { box-shadow: var(--shadow-soft); }
.ivi-btn--elevated:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(8, 0, 79, .20);
}
/* Icono solo (redondo). Combinar con un color: .ivi-btn--primary, etc. */
.ivi-btn--icon {
padding: 0;
width: 44px;
height: 44px;
border-radius: 50%;
gap: 0;
}
.ivi-btn--icon.ivi-btn--sm { width: 36px; height: 36px; }
.ivi-btn--icon.ivi-btn--lg { width: 52px; height: 52px; }
/* ============================================================
28. HOME — BLOQUES REDISEÑADOS
(fusionado del CSS adicional el 2026-07-13)
HTML en bloques/4-codigo-nuevo/home--*.html. Los componentes
aplican por su PROPIA clase (ivi-*__algo), sin exigir clase de
bloque en la config de Totara.
⚠️ Los instXXXX y el informe 202 son de PRE; revisar en PRO.
============================================================ */
/* --- 28.1 Sidebar: contenedor de los bloques --- */
#block-region-side-post .block .block-content {
border-radius: var(--block-radius);
border: var(--block-border);
box-shadow: var(--block-shadow);
background: var(--block-background-color);
}
/* Tarjetas a sangre: los bloques que contienen una tarjeta ivi-*
pierden el marco del contenedor (fondo blanco, borde, padding y
sombra); el borde redondeado y la sombra los pone la tarjeta */
#block-region-side-post .block:has(.ivi-pnts__card) .block-content,
#block-region-side-post .block:has(.ivi-repositorio__card) .block-content,
#block-region-side-post .block:has(.ivi-kpi__enlace) .block-content {
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* --- 28.2 Tarjetas del sidebar (Mis PNTs, Repositorio) ---
Fondo de color plano, texto a la izquierda y motivo floral IVI
asomando por la derecha. La imagen de fondo y el padding van
INLINE en el HTML de cada bloque (fáciles de cambiar). */
.ivi-pnts__card,
.ivi-repositorio__card {
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
text-align: left;
background-repeat: no-repeat;
background-position: right center;
/* auto 100%: la imagen se ajusta SIEMPRE al alto de la tarjeta
(el ancho sobrante se recorta por la derecha) */
background-size: auto 100%;
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05)));
}
.ivi-pnts__card {
background-color: var(--light-blue, #004DF0);
}
.ivi-repositorio__card {
background-color: #6FDFC7; /* menta del mockup; sin token aún */
}
/* Título de tarjeta (color según fondo) */
.ivi-card__titulo {
font-family: var(--font-title, 'IVI Glance', sans-serif) !important;
font-size: 26px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
margin: 0 !important;
}
.ivi-pnts__card .ivi-card__titulo { color: #fff !important; }
.ivi-repositorio__card .ivi-card__titulo { color: var(--navy-blue, #08004F) !important; }
/* Contador de PNTs (el nº lo rellena "JS: Recuento PNTs restantes";
el gancho del JS es la clase pnts-card__title en el div) */
.ivi-pnts__card.pnts-card__title p,
.ivi-pnts__card .ivi-pnts__contador {
margin: 0;
padding: 0;
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 15px;
font-weight: 400;
opacity: 1;
color: #fff;
}
.ivi-pnts__card .ivi-pnts__contador b {
color: var(--teal, #0CE3C6);
font-weight: 700;
}
/* Separar un poco el botón del texto */
.ivi-pnts__card .ivi-btn,
.ivi-repositorio__card .ivi-btn { margin-top: 10px; }
/* --- 28.3 OneTech Training: imagen con botón superpuesto --- */
.ivi-onetech__card {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.ivi-onetech__card img {
display: block;
width: 100%;
height: auto;
}
.ivi-onetech__card .ivi-btn {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
}
/* Mantener centrado también al pulsar (la base mueve 1px en Y) */
.ivi-onetech__card .ivi-btn:active {
transform: translateX(-50%) translateY(1px);
}
/* Bloque OneTech ACTUAL (aún sin rediseñar): botón en IVI Glance */
#inst10654.one-tech-launch .content.block-content a,
#inst9929.one-tech-launch .content.block-content a {
font-family: var(--font-title, 'IVI Glance', sans-serif) !important;
}
/* --- 28.4 Finalización vs Inscritos: aspecto de BOTÓN blanco ---
Botón blanco con borde suave (semántica .ivi-btn--ghost): blanco →
hover relleno navy. Solo CSS; el HTML del bloque no cambia. --- */
.ivi-kpi__enlace {
display: flex;
align-items: center;
justify-content: center; /* contenido centrado, como un botón */
gap: 10px;
background: #fff; /* botón blanco (antes crema --warm-gray) */
border: 2px solid var(--border-soft, #E4E2EE);
border-radius: var(--btn-radius-pill, 999px); /* píldora, como los botones */
padding: 14px 26px;
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 16px;
font-weight: 700;
color: var(--navy-blue, #08004F) !important;
text-decoration: none !important;
transition: background-color .2s ease;
box-shadow: none; /* el botón no lleva la sombra del banner */
}
#block-region-side-post .ivi-kpi__enlace:hover,
#block-region-side-post .ivi-kpi__enlace:focus {
background: var(--navy-blue, #08004F); /* hover: se rellena (invierte) */
border-color: var(--navy-blue, #08004F);
color: #fff !important;
}
.ivi-kpi__enlace .material-symbols-outlined {
font-size: 26px;
color: var(--navy-blue, #08004F);
}
/* Texto (.multilang) e icono en blanco al hacer hover. Se ancla al id de la
región (#block-region-side-post) para ganar a la regla de enlace del tema
base (color en hover con !important y mayor especificidad). */
#block-region-side-post .ivi-kpi__enlace:hover *,
#block-region-side-post .ivi-kpi__enlace:focus * {
color: #fff !important;
}
/* --- 28.5 Filas con icono azul (componente genérico) ---
.ivi-imparto__* se mantiene como alias para los bloques publicados. */
.ivi-imparto__titulo {
font-family: var(--font-body, 'Noto Sans', sans-serif) !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--navy-blue, #08004F) !important;
margin: 0 0 12px !important;
}
.block:has(.ivi-icono-azul) {
margin-bottom: 15px !important;
}
.block:has(.ivi-icono-azul) > .content.block-content {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
:is(.ivi-icono-azul, .ivi-imparto__lista) {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
background: #fff;
border: 1px solid var(--border-soft, #E3E3E3);
border-radius: 12px;
}
:is(.ivi-icono-azul__item, .ivi-imparto__item) {
display: flex;
align-items: center;
gap: 12px;
padding: 6px;
border-radius: 10px;
text-decoration: none !important;
transition: background-color .2s ease;
}
:is(.ivi-icono-azul__item, .ivi-imparto__item):hover,
:is(.ivi-icono-azul__item, .ivi-imparto__item):focus {
background: var(--bg-blue, #DCE6FF);
}
:is(.ivi-icono-azul__item, .ivi-imparto__item) .material-symbols-outlined {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--bg-blue, #DCE6FF);
border-radius: 10px;
color: var(--light-blue, #004DF0);
font-size: 24px;
}
:is(.ivi-icono-azul__nombre, .ivi-imparto__nombre) {
display: block;
color: var(--light-blue, #004DF0) !important;
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 15px;
font-weight: 700;
}
:is(.ivi-icono-azul__detalle, .ivi-imparto__detalle) {
display: block;
color: var(--text-gray, #666);
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 13px;
font-weight: 700;
}
/* --- 28.6 Cursos en los que soy tutor (bloque NATIVO report table) ---
Informe 202 en la instancia 8428: el HTML lo genera Totara, así
que es 100% CSS con el mismo diseño que "Cursos que imparto". */
/* Título del bloque, en IVI Glance */
.block_totara_report_table_8428 .block-header h2 {
font-family: var(--font-title, 'IVI Glance', sans-serif) !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--navy-blue, #08004F) !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
/* Card blanca, sin padding (el aire lo ponen las filas) */
.block_totara_report_table_8428 .block-content {
background: #fff !important;
border: 1px solid var(--border-soft, #E3E3E3) !important;
border-radius: 12px !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Fuera: aviso de filtros, hueco del gráfico y cabecera de la tabla */
.block_totara_report_table_8428 .alert-warning,
.block_totara_report_table_8428 .rb-report-svggraph,
.block_totara_report_table_8428 thead { display: none !important; }
/* Resets de la tabla */
.block_totara_report_table_8428 .totaratable {
width: 100%;
margin: 0;
border: none;
background: transparent;
}
.block_totara_report_table_8428 .totaratable td {
padding: 0;
border: none;
background: transparent !important; /* anula el rayado del tema */
}
/* Cada fila = item del diseño: grid de icono (::before) + 2 líneas.
Las celdas ocultas (usuario, completado) llevan display:none inline
y no entran en el grid. */
.block_totara_report_table_8428 .totaratable tbody tr {
display: grid;
grid-template-columns: 44px 1fr;
column-gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 10px;
background: transparent !important; /* anula el rayado del tema */
transition: background-color .2s ease;
}
.block_totara_report_table_8428 .totaratable tbody tr:hover {
background: var(--bg-blue, #DCE6FF) !important;
}
/* Icono en cuadrado azul claro (ligadura de Material Symbols) */
.block_totara_report_table_8428 .totaratable tbody tr::before {
content: "school";
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
grid-column: 1;
grid-row: 1 / span 2;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-blue, #DCE6FF);
border-radius: 10px;
font-size: 24px;
color: var(--light-blue, #004DF0);
}
/* Nombre del curso (arriba) — se oculta el laptop coral del informe */
.block_totara_report_table_8428 td.course_courselinkicon { grid-column: 2; grid-row: 1; }
.block_totara_report_table_8428 td.course_courselinkicon .course_icon { display: none; }
.block_totara_report_table_8428 td.course_courselinkicon a {
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 15px;
font-weight: 700;
color: var(--light-blue, #004DF0) !important;
text-decoration: none !important;
}
/* Categoría (debajo, en gris) */
.block_totara_report_table_8428 td.course_custom_field_1 {
grid-column: 2;
grid-row: 2;
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 13px;
color: var(--text-gray, #666);
}
/* Pie "Ver informe completo": discreto, a la derecha */
.block_totara_report_table_8428 .footer {
margin-top: 10px;
text-align: right;
}
.block_totara_report_table_8428 .footer a {
font-family: var(--font-body, 'Noto Sans', sans-serif);
font-size: 13px;
font-weight: 600;
color: var(--light-blue, #004DF0) !important;
}
/* --- 28.7 Enlaces de interés (#links-lfe) ---
Los tiles muestran las imágenes configuradas en el propio bloque;
solo se retocan proporciones y la zona del título. */
/* Aire sobre el título del bloque (el .block-title vive dentro del
header; ponérselo a los dos duplicaría el espacio) */
#inst231 .block-header {
margin-top: 2rem;
}
/* Altura de los tiles: 260px por defecto en cualquier página donde aparezca
el bloque; SOLO la instancia de la Home (#inst231) baja a 200px. El id
#links-lfe va en el contenido del bloque y se repite en otras páginas, por
eso la Home se acota con su id de instancia (la regla #inst231 va después,
misma especificidad → gana en la Home). */
#links-lfe .block-totara-featured-links-tile {
height: 260px !important;
}
#inst231 .block-totara-featured-links-tile {
height: 200px !important;
}
/* Imagen (background del tile) ajustada al ANCHO y centrada, sin recorte
`cover` ni repetición */
#links-lfe .block-totara-featured-links-tile.background-cover {
background-size: 100% auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Sin margen superior cuando el bloque va sin marco (chromeless) */
.block.chromeless .block-totara-featured-links-layout {
margin-top: 0px !important;
}
/* Filo superior muy sutil en el velo del título */
.block-totara-featured-links-layout .block-totara-featured-links-content::before {
border-top: 1px solid rgba(8, 0, 79, 0.2);
}
/* Título del tile: más pequeño y en azul corporativo */
.block-totara-featured-links-layout .block-totara-featured-links-content h3 {
font-size: 16px !important;
color: var(--light-blue, #004DF0) !important;
text-shadow: none !important;
}
/* ============================================================
"VOLVER A MI LFE" (.ivi-mylfe) — card navy que ocupa TODO el
bloque, con el logo LFE blanco y el botón (ivi-btn) inset por los
lados. El botón reutiliza los estilos .ivi-btn del organizado; el
margen lateral del botón lo da el padding lateral del contenedor.
HTML: bloques/4-codigo-nuevo/visor-puntos--volver-mi-lfe.html.
============================================================ */
.ivi-mylfe {
background-color: var(--navy-blue, #08004F);
border-radius: 12px;
padding: 1.5em 2em; /* vertical 1.5em · lateral 2em = margen del botón */
text-align: center;
}
/* Logo LFE blanco centrado */
.ivi-mylfe__logo {
display: inline-block;
margin-bottom: 14px;
line-height: 0;
}
.ivi-mylfe__logo img {
width: 120px;
height: auto;
}
/* El botón va a todo el ancho del contenedor; el aire lateral (margen
del botón) sale del padding de .ivi-mylfe. Para MÁS margen, sube el
`2em` del padding lateral de arriba. */
.ivi-mylfe__btn.ivi-btn { margin: 0; }
/* Quita la CAJA BLANCA del bloque de Totara que contiene la card (el
"recuadro blanco detrás de la imagen"): fondo/sombra/borde/padding del
bloque a cero para que el navy de .ivi-mylfe ocupe todo el bloque. */
.block:has(.ivi-mylfe),
.block:has(.ivi-mylfe) > .content,
.block:has(.ivi-mylfe) .content.block-content,
.block:has(.ivi-mylfe) .content .no-overflow {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
/* Por si el /imagen del logo hereda algún fondo: transparente. */
.ivi-mylfe__logo,
.ivi-mylfe__logo img {
background: transparent !important;
}
/* ============================================================
MONTHLY SEMINARS COMPLETADOS (#inst8174) — cards estilo
Expediente (JS) + tabla estilizada de fallback (IVI 2026)
El script monthly-seminars--cards.html oculta la tabla e inyecta
.exp-card en #ms-grid. Si el JS no corre, queda la tabla estilizada.
El fondo transparente del bloque se añadió a la regla .dai-wrap.
============================================================ */
/* --- A) Tabla estilizada de fallback. La
); aquí solo se recoloca arriba-centrado en la columna. */ #page-login-index .loginpanel h2 { position: absolute; top: 36px; left: 0; right: auto; width: 428px; height: 56px; background-color: transparent; background-position: center; background-size: 260px; border-radius: 0; font-size: 0; } /* Panel derecho: navy "flotando" dentro del card (margen por los 4 lados y esquinas redondeadas) */ #page-login-index .loginpanel { order: 2; background-color: var(--navy-blue); color: #fff !important; margin: var(--spacing-large); padding: var(--spacing-xl); max-width: 373px; border-radius: var(--border-radius-large); } /* Etiquetas del formulario sin iconos de persona/candado */ #page-login-index .loginform div:nth-child(1):before, #page-login-index .loginform div:nth-child(4):before { display: none !important; } /* Inputs blancos con texto navy */ #page-login-index .loginbox .loginform .form-input input { background-color: #fff !important; color: var(--navy-blue); border: none; border-radius: 8px; } #page-login-index .forgetpass { line-height: 1.4em !important; } /* Enlace "¿Olvidó su nombre de usuario o contraseña?" en azul claro */ #page-login-index .forgetpass a { color: var(--bg-blue) !important; line-height: 1.4em !important; font-size: 14px; } #page-login-index .forgetpass a:hover { color: white !important; } /* Botón "Iniciar sesión": azul brillante, texto blanco y en negrita. Noto Sans porque 'IVI Glance' (forzada en el head) solo tiene el peso normal cargado; Noto Sans 700 sí está disponible. */ #page-login-index .loginpanel #loginbtn { color: #fff; background-color: var(--light-blue); font-family: 'Noto Sans', -apple-system, sans-serif !important; font-weight: 700 !important; } #page-login-index .loginpanel #loginbtn:hover { color: #fff; background-color: var(--blue-hover); } #page-login-index .potentialidp img.icon { display: none; } /* Botón Office 365 / SSO: pill blanco con borde navy y texto en negrita */ #page-login-index .potentialidp a.btn.btn-default { background-color: #fff !important; color: var(--navy-blue) !important; border: 1.5px solid var(--navy-blue) !important; border-radius: var(--border-radius-xl) !important; font-family: 'Noto Sans', -apple-system, sans-serif !important; font-weight: 700 !important; } #page-login-index .potentialidp a.btn.btn-default:hover { background-color: var(--bg-blue) !important; color: var(--navy-blue) !important; } /* Icono del botón Office 365: rejilla en navy (glyph de Material Symbols, cargado en el head; el SVG monocromo anterior no se veía sobre blanco) */ #page-login-index .potentialidp a.btn.btn-default::before { content: "grid_view"; font-family: 'Material Symbols Outlined'; font-weight: 400; font-size: 20px; line-height: 1; width: auto; height: auto; background: none; color: var(--navy-blue); margin-right: 8px; vertical-align: middle; } /* Textos multiidioma para login */ #page-login-index .subcontent.loginsub::before { content: ""; display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.5em; } #page-login-index.lang-es .subcontent.loginsub::before { content: "Accede con tu usuario y contraseña recibidos por correo electrónico:"; } #page-login-index.lang-en .subcontent.loginsub::before { content: "Log in with your username and password received by email:"; } #page-login-index.lang-it .subcontent.loginsub::before { content: "Accedi con il tuo nome utente e password ricevuti via e-mail:"; } #page-login-index.lang-pt .subcontent.loginsub::before { content: "Acesse com seu usuário e senha recebidos por e-mail:"; } #page-login-index.lang-cz .subcontent.loginsub::before { content: "Přihlaste se pomocí uživatelského jména a hesla obdrženého e-mailem:"; } #page-login-index.lang-sv .subcontent.loginsub::before { content: "Logga in med ditt användarnamn och lösenord som du fått via e-post:"; } /* Aviso de "Cookies": no se muestra en el diseño nuevo */ .loginbox .desc { display: none; } .signuppanel h2 { display: none !important; } .signuppanel .externalaccess h2:first-child { display: inherit; font-family: 'GothamRounded'; color: #fff; text-align: center; margin-top: 0px; } .signuppanel .subcontent.potentialidps h6 { display: none; } .signuppanel .subcontent.potentialidps .potentialidplist { width: 100% !important; text-align: center !important; margin: var(--spacing-small); } .signuppanel .subcontent.potentialidps .potentialidplist a.btn.btn-default, #page-login-index .loginpanel #loginbtn { padding: 12px 18px !important; max-width: 100%; } /* Columna izquierda: hueco arriba (padding-top) para el logo recolocado */ #page-login-index .signuppanel { order: 1; max-width: 428px; width: 100%; background-color: transparent; color: #444243; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; align-content: center; padding: 110px 40px 0px 40px; border-bottom-left-radius: var(--border-radius-large); } #page-login-index .signuppanel .login-top h3 { text-align: center !important; color: var(--color-primary) !important; font-family: "IVI Glance", "Noto Sans" !important; font-weight: Bold; font-size: 2.2em !important; } #page-login-index .signuppanel .login-top { margin-bottom: var(--spacing-xl); } /* "Si trabajas en IVI RMA" (span) y "Si el acceso mediante Office..." (em) en navy y centrados */ #page-login-index .signuppanel .login-top span, #page-login-index .signuppanel .login-detalles em { font-size: 15px; text-align: center !important; display: block; line-height: 1.4em !important; color: var(--navy-blue); } #page-login-index .signuppanel .login-top span { font-size: 1.1em; font-weight: 700; } /* Columna izquierda a ancho completo para centrar/alinear su contenido */ #page-login-index .signuppanel > .subcontent, #page-login-index .signuppanel .login-detalles { width: 100%; } /* "¿Tienes problemas para entrar?": sin caja, centrado; enlaces subrayados en navy con icono en light blue */ #page-login-index .signuppanel .problemas { background-color: transparent; color: var(--navy-blue); padding: 0; width: 100%; margin: 40px 0 0 0; box-shadow: none; text-align: center; } #page-login-index .signuppanel .problemas h4 { font-size: 17px; font-weight: 700; color: var(--navy-blue); } #page-login-index .signuppanel .problemas ul#list-problemas { padding-left: 0; margin-bottom: 0; } #page-login-index .signuppanel .problemas ul li, #page-login-index .signuppanel .problemas ul li.mail { list-style-type: none; margin-left: 0; background: none; padding: 3px 0; } /* Iconos de los enlaces en light blue (glyphs de Material Symbols): engranaje para las asistencias y sobre para el email */ #page-login-index .signuppanel .problemas ul#list-problemas li::before { content: "settings"; font-family: 'Material Symbols Outlined'; font-weight: 400; color: var(--light-blue); font-size: 18px; line-height: 1; vertical-align: middle; margin-right: 6px; } #page-login-index .signuppanel .problemas ul#list-problemas li.mail::before { content: "mail"; } #page-login-index .signuppanel .problemas ul#list-problemas li a { color: var(--navy-blue) !important; text-decoration: underline; } #page-login-index .signuppanel .problemas ul#list-problemas li a:hover { color: var(--light-blue) !important; } .signuppanel hr { display: none; } .externalaccess { display: flex; flex-direction: column; align-items: stretch; align-content: center; justify-content: space-evenly; gap: var(--spacing-large); } .externalaccess .ext_text p { width: 75%; text-align: center; margin-bottom: 0px; line-height: 21px; } .externalaccess .ext_text { display: flex; flex-direction: column; align-content: center; align-items: center; gap: var(--spacing-large); } /* Sin la línea superior del footer en la página de login */ #page-login-index .second-page-footer { border-top: none; } /* ============================================================ 3. DASHBOARD PRINCIPAL ============================================================ */ /* Fondo crema de la Home (dashboard 1) */ #page-totara-dashboard-1 { background-color: #faf4ee !important; } /* La Home de usuarios externos mantiene el fondo blanco de la Home interna. */ #page-totara-dashboard-6 { background-color: #fff !important; } /* --- Slider principal --- */ .block_slickslider .elslide div.nolink { margin: auto auto auto 0px; max-height: 80% !important; border-radius: 0px 20px 20px 0px !important; padding-right: 50px; background: none !important; } .block_slickslider { margin-bottom: 50px !important; } .block_slickslider .elslide .conttext .titol { font-weight: 400 !important; } .block_slickslider .conttext .text { color: #ffffffdc; font-weight: normal; font-size: 0.9em; } /* Caja de texto más ancha (títulos en menos líneas); el título rompe línea al final de "…Campus" (ajustar el 18em si cambia el texto) */ @media (min-width: 768px) { .block_slickslider .elslide div.nolink { width: 60% !important; max-width: 60% !important; } .block_slickslider .elslide .conttext .titol { max-width: 18em; margin-bottom: 0; } } /* Fuera los
vacíos del bloque (metían 30px de margen que
descolgaba el subtítulo) */
.block_slickslider .conttext .text p:empty { display: none; }
/* Subtítulo equidistante entre título y botón */
.block_slickslider .conttext .text > div {
margin: 14px 0;
}
/* Botón del slider: negrita y separado del subtítulo */
.block_slickslider .conttext .ivi-btn {
font-weight: 700;
margin-top: 24px;
}
/* .vimeo-trigger-btn ya NO se estiliza aquí: queda solo como gancho del
popup. Su aspecto lo da el sistema de botones (.ivi-btn, sección 27). */
.hero-principal .btn-banner {
padding: 12px 25px;
background-color: white;
border-radius: 25px;
color: var(--color-secondary);
font-size: 16px;
font-weight: 500;
border: 1.5px solid white;
transition: background-color 0.3s ease-in, transform 0.3s ease-in;
}
.hero-principal .btn-banner:hover {
color: white;
background-color: #ffffff40 !important;
transform: scale(1.03);
}
/* --- Hero: al ancho del contenido (decisión 2026-07-13) ---
Antes hacía breakout a 100vw; ahora queda alineado con el resto
de la página, con aire arriba y abajo. El prefijo html suma
especificidad para ganar al fullscreen.css del tema. */
html .has-full-page-slider #block-region-top .block_slickslider.fullwidth-slider {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
}
/* Aire sobre el hero (padding en la región: los márgenes del bloque
los pisa el fullscreen.css del plugin) */
html .has-full-page-slider #block-region-top {
padding-top: 20px !important;
}
/* Sin padding lateral: el slider apura la columna, alineado con los
bloques de abajo (verificado 2026-07-14) */
#block-region-top #inst11487.block_slickslider {
padding: 1.5rem 0;
}
/* Espacio bajo el slider del hero (la regla general pone 50px) */
#block-region-top .block_slickslider {
margin-bottom: 20px !important;
}
.block_slickslider .conttext {
padding-left: 5em;
}
/* Texto del hero: margen fijo (ya sin cálculo sobre el viewport) */
.has-full-page-slider #inst223.fullwidth-slider .conttext {
padding-left: 70px !important;
padding-right: 20px;
}
/* --- Banner "Learning for Excellence" (Home): degradado de marca LFE
(navy→violeta→magenta→rosa, 4 paradas) + tarjeta crema con el curso
destacado. El botón usa el sistema .ivi-btn (ver HTML). --- */
.cta_lfe .content.block-content {
background: linear-gradient(90deg,
#0F0E65 0%,
#5B2C9E 44%,
#7A2494 65%,
#B2407E 89%) !important;
color: #fff !important;
padding: 20px 26px !important;
border-radius: var(--border-radius-large);
}
.cta_lfe .no-overflow {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-large);
}
.cta_lfe .no-overflow .izq {
display: flex;
align-items: center;
gap: var(--spacing-medium);
margin-left: var(--spacing-small);
flex: 0 1 auto;
}
/* Badge circular del logo LFE (el SVG trae su propio fondo) */
.cta_lfe .no-overflow .izq img {
width: 110px !important;
object-fit: contain;
border-radius: 50%;
flex: 0 0 auto;
}
.cta_lfe .no-overflow .izq h3 {
font-family: var(--font-title) !important;
font-size: 26px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #fff !important;
margin: 0 !important;
}
.cta_lfe .no-overflow .izq h3 b { font-weight: 700 !important; }
/* Tarjeta crema con el curso destacado y el botón (≈52% del banner) */
.cta_lfe .no-overflow .dcha {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-large);
flex: 0 0 52%;
background: var(--warm-gray);
padding: 14px 16px 14px 24px;
border-radius: var(--border-radius);
text-align: left;
box-shadow: 0 4px 14px rgba(8, 0, 79, 0.12);
}
.cta_lfe .no-overflow .dcha p {
margin: 0;
line-height: 1.35;
}
.cta_lfe .no-overflow .dcha .lfe-banner-titulo {
font-family: var(--font-body);
font-weight: 700;
font-size: 17px;
color: var(--navy-blue);
}
.cta_lfe .no-overflow .dcha .lfe-banner-tipo,
.cta_lfe .no-overflow .dcha .lfe-banner-tipo b {
font-weight: 400;
font-size: 15px;
color: var(--text-gray);
}
/* Responsive: apilar en móvil */
@media (max-width: 767px) {
.cta_lfe .no-overflow,
.cta_lfe .no-overflow .dcha {
flex-direction: column;
text-align: center;
}
.cta_lfe .no-overflow .izq { margin-left: 0; }
.cta_lfe .no-overflow .dcha { padding: 18px; }
}
/* --- Ocultar dropdown del bloque current_learning --- */
#inst211.block_current_learningas .statusselector.dropdown,
#inst212.block_current_learningas .statusselector.dropdown,
#inst218.block_current_learningas .statusselector.dropdown,
#inst226.block_current_learningas .statusselector.dropdown,
#inst233.block_current_learningas .statusselector.dropdown,
#inst352.block_current_learningas .statusselector.dropdown {
display: none !important;
}
/* --- Bloques one-tech-launch --- */
#inst9929.one-tech-launch .content.block-content,
#inst10654.one-tech-launch .content.block-content{
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/One-Tech-IVI-Institute-Campus-banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align:center;
padding:2em 1em!important;
}
#inst9929.one-tech-launch .content.block-content a,
#inst10654.one-tech-launch .content.block-content a{
padding: 12px 25px;
background-color: white;
border-radius: 25px;
color: var(--color-secondary);
font-size: 15px;
font-weight: 500;
border: 1.5px solid white;
transition: background-color 0.3s ease-in, transform 0.3s ease-in;
margin-top:20px!important;
}
#inst9929.one-tech-launch .content.block-content a:hover,
#inst10654.one-tech-launch .content.block-content a:hover {
color: white!important;
background-color: #ffffff40 !important;
transform: scale(1.03);
}
#inst9929.one-tech-launch .content.block-content img,
#inst10654.one-tech-launch .content.block-content img {
margin-bottom:20px!important;
}
#inst9929 .no-overflow,
#inst10654 .no-overflow{
overflow: hidden !important;
padding: 10px;
}
/* --- Responsive de botones de calificaciones --- */
@media (min-width: 768px) {
/* Bloques-informe del sidebar (Cursos que imparto, Finalización,
Tracking): enlaces navy en negrita (rediseño 2026-07-13; antes
eran botones naranjas con texto blanco) */
#inst8620 .content a,
#inst9006 .content a,
#inst9120 .content a,
#inst10987 .content a {
color: var(--navy-blue) !important;
font-weight: 700;
}
}
/* --- Ajustes finales de gráficas e informes de administración --- */
#page-totara-dashboard-2 .rb-chartjs__chart,
#page-totara-dashboard-3 .rb-chartjs__chart,
#page-totara-dashboard-4 .rb-chartjs__chart,
#page-totara-dashboard-22 .rb-chartjs__chart,
#page-totara-dashboard-23 .rb-chartjs__chart,
#page-totara-dashboard-26 .rb-chartjs__chart,
#page-totara-dashboard-15 .rb-chartjs__chart,
#page-totara-dashboard-2 .rb-chartjs__chart__canvas,
#page-totara-dashboard-3 .rb-chartjs__chart__canvas,
#page-totara-dashboard-4 .rb-chartjs__chart__canvas,
#page-totara-dashboard-22 .rb-chartjs__chart__canvas,
#page-totara-dashboard-23 .rb-chartjs__chart__canvas,
#page-totara-dashboard-26 .rb-chartjs__chart__canvas,
#page-totara-dashboard-15 .rb-chartjs__chart__canvas {
height: 400px !important;
max-height: 400px !important;
}
/* Barras al doble de alto: SOLO las gráficas de barras horizontales
(seguimiento de cursos, muchas filas), detectadas por el tipo real
en data-report-options. Las de líneas ("Accesos por mes") se quedan
a 400px. Independiente de inst-id / idioma / región. */
#page-totara-dashboard-2 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-2 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-3 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-3 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-4 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-4 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-22 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-22 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-23 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-23 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-26 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-26 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'],
#page-totara-dashboard-15 #page-content .rb-chartjs__chart:has(.rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"']),
#page-totara-dashboard-15 #page-content .rb-chartjs__chart__canvas[data-report-options*='"type":"horizontalBar"'] {
height: 800px !important;
max-height: 800px !important;
}
/* Área de la gráfica como tarjeta blanca (canvas + "Ver informe
completo"). Los divs internos siguen transparentes (§29) y muestran
este blanco; el título del bloque queda encima, sobre el crema. */
#page-totara-dashboard-2 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-3 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-4 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-22 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-23 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-26 #page-content .block_totara_report_graph .content.block-content {
padding: 24px !important;
background: #fff !important;
border-radius: 14px !important;
box-shadow: var(--shadow-soft) !important;
}
#page-totara-dashboard-2 .block_totara_report_graph .footer,
#page-totara-dashboard-3 .block_totara_report_graph .footer,
#page-totara-dashboard-4 .block_totara_report_graph .footer,
#page-totara-dashboard-22 .block_totara_report_graph .footer,
#page-totara-dashboard-23 .block_totara_report_graph .footer,
#page-totara-dashboard-26 .block_totara_report_graph .footer {
margin-top: 16px;
}
.ivi-report-footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.ivi-report-footer .ivi-full-report-btn {
background: #fff !important;
border-color: #fff !important;
color: var(--light-blue, #004df0) !important;
}
.ivi-report-footer .ivi-full-report-btn:hover,
.ivi-report-footer .ivi-full-report-btn:focus {
background: var(--light-blue, #004df0) !important;
border-color: var(--light-blue, #004df0) !important;
color: #fff !important;
}
/* --- Mosaicos de informes destacados y LFE --- */
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout {
row-gap: 28px !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small),
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) {
justify-content: flex-start !important;
margin-bottom: 40px !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small {
flex-grow: 0 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-layout:has(.block-totara-featured-links-tile-small) .block-totara-featured-links-flex-filler {
display: none !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 68px !important;
min-height: 68px !important;
max-height: 68px !important;
padding: 8px 12px !important;
background: transparent !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small .block-totara-featured-links-content-bottom::before {
background: transparent !important;
opacity: 0 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-small h3 {
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-size: 14px !important;
line-height: 1.2 !important;
text-align: center !important;
}
/* Tarjetas grandes: franja blanca translúcida, compacta y uniforme. */
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
padding: 10px 18px !important;
background: transparent !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom::before {
background: rgba(255, 255, 255, 0.78) !important;
opacity: 1 !important;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom h3 {
position: relative;
z-index: 1;
margin: 0 !important;
padding: 0 !important;
color: var(--navy-blue, #08004f) !important;
line-height: 1.25 !important;
text-align: center !important;
}
/* La tarjeta recorta su imagen; al abrir la rueda se libera el recorte
para que el menú de edición pueda desplegarse con margen. */
.block_totara_featured_links .block-totara-featured-links-tile:has([aria-expanded="true"]),
.block_totara_featured_links .block-totara-featured-links-tile:has(.open),
.block_totara_featured_links .block-totara-featured-links-tile:has(.show) {
position: relative !important;
overflow: visible !important;
z-index: 50 !important;
}
.block_totara_featured_links .block-totara-featured-links-tile:has([aria-expanded="true"]) [role="menu"],
.block_totara_featured_links .block-totara-featured-links-tile:has(.open) [role="menu"],
.block_totara_featured_links .block-totara-featured-links-tile:has(.show) [role="menu"] {
z-index: 51 !important;
}
@media (max-width: 767px) {
#page-totara-dashboard-2 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-3 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-4 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-22 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-23 #page-content .block_totara_report_graph .content.block-content,
#page-totara-dashboard-26 #page-content .block_totara_report_graph .content.block-content {
padding: 16px !important;
}
.ivi-report-footer .ivi-full-report-btn {
width: 100%;
}
#page-totara-dashboard-2 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-3 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-4 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-22 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-23 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom,
#page-totara-dashboard-26 #page-content .block_totara_featured_links .block-totara-featured-links-tile-medium .block-totara-featured-links-content-bottom {
height: 72px !important;
min-height: 72px !important;
max-height: 72px !important;
padding: 8px 14px !important;
}
}
/* ============================================================
4. DASHBOARD LFE
============================================================ */
/* Fondo warm gray de las páginas LFE: dashboard 10 (LFE), 11 (Monthly
Seminars), 12 (Must-Read), 27 (Visor de puntos LFE 2025) y edición
de certificados (mod/data) */
#page-totara-dashboard-10,
#page-totara-dashboard-11,
#page-totara-dashboard-12,
#page-totara-dashboard-27,
#page-mod-data-edit {
background-color: var(--warm-gray, #faf4ee) !important;
}
/* Espaciado de bloques de la columna lateral en Monthly: visor
(#inst295) y botón "Volver a mi LFE" (#inst351) */
#inst295 .content.block-content {
padding-top: 10px !important;
}
#inst295,
#inst351 {
margin-top: 16px !important;
margin-bottom: 15px !important;
}
/* --- Slider LFE --- */
.block_slickslider.lfe_hero .elslide div.nolink,
.block_slickslider.lfe_hero .elslide div.nolink .conttext {
width: 100% !important;
margin: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext h2,
.block_slickslider.lfe_hero h4.lfe-banner-tipo {
color: white !important;
text-align: center !important;
font-family: "IVI Glance", "Noto Sans" !important;
font-size: 2em !important;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext .text h2 {
margin-top: var(--spacing-small) !important;
font-weight: bold;
}
.block_slickslider.lfe_hero .elslide div.nolink .conttext .slick-slide .lfe-white {
display: flex !important;
padding-bottom: var(--spacing-xl) !important;
margin: auto !important;
}
/* --- Hero LFE (rebranding): el degradado rosa→morado y el círculo
blanco del logo van INCRUSTADOS en la imagen de fondo que sube
Beatriz (decisión 2026-07-14); el CSS ya no los pinta. El .nolink
queda como capa transparente que centra el texto sobre la foto. */
/* Contenedor del slide posicionado para anclar la capa absoluta */
.block_slickslider.lfe_hero .slick-slide,
.block_slickslider.lfe_hero .slick-slide > .elslide {
position: relative !important;
}
.block_slickslider.lfe_hero .elslide .nolink {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
justify-content: center !important;
border-radius: 20px !important;
padding: 2.5em 1em !important;
background: none !important;
}
/* Logo LFE: solo tamaño y centrado (sin círculo blanco) */
.block_slickslider.lfe_hero .conttext .text img {
width: 160px !important;
height: 160px !important;
object-fit: contain;
margin: 0 auto 0px !important;
}
/* Título grande y "tipo" (Ginecología) más pequeño */
.block_slickslider.lfe_hero .conttext .text h2.lfe-banner-titulo {
font-size: 2.6em !important;
font-weight: 700 !important;
line-height: 1.12 !important;
margin: 0 !important;
}
.block_slickslider.lfe_hero h4.lfe-banner-tipo {
font-size: 1.35em !important;
font-weight: 400 !important;
margin-top: 6px !important;
opacity: 0.96;
}
/* --- Visor box (rebranding): tarjeta blanca a 10px con badge
centrado; "puntuación actual" en navy y hover de elevación de la
tarjeta. El título "Visor de puntos LFE" va en IVI Glance dentro de
la card (Monthly); el botón "Volver a mi LFE" (.ivi-btn) queda bajo
la tarjeta. --- */
.visor-box .no-overflow {
padding: 0 !important;
}
.visor-box a.btn.lfe {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
background-color: #ffffff;
border-radius: 10px;
padding: 1.5em 1.25em;
text-align: center;
color: var(--text-gray);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.visor-box a.btn.lfe:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.12);
text-decoration: none;
}
.visor-box a.btn.lfe b {
color: var(--navy-blue) !important;
}
.visor-box a.btn.lfe img {
margin-bottom: 0;
}
.visor-box a.btn.lfe img:hover {
opacity: 1 !important;
}
.visor-box a.btn.lfe .lfe-visor-title {
font-family: var(--font-title) !important;
color: var(--navy-blue) !important;
font-weight: 400 !important;
font-size: 1.35em;
text-align: center;
margin: 0;
}
.visor-box .ivi-btn {
margin-top: 12px;
}
/* --- .no-obligatorio: aviso salmón con icono Material naranja
(relleno) en vez de info_orange.svg; el gap sustituye al
margin-right del retirado. --- */
.no-obligatorio {
display: flex;
align-items: flex-start;
gap: 16px;
background: #FFF0EE70 !important;
/* Aire bajo el texto (antes 5px) + borde naranja de marca */
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-small);
border: 1.5px solid var(--bright-orange);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-large);
font-size: 1.1em;
}
.no-obligatorio .izq .material-symbols-outlined {
font-size: 26px;
color: var(--bright-orange);
font-variation-settings: 'FILL' 1;
}
.no-obligatorio b {
color: var(--orange);
}
/* --- Presentación LFE (#inst209 .preslfe): dos tarjetas blancas —
bienvenida (izq) y card de la presentación (dcha, clicable vía JS
del tema) con panel azul claro para la ilustración. --- */
.preslfe .content.block-content {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.preslfe .content.block-content .no-overflow {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 24px;
overflow: visible !important;
}
.preslfe .content.block-content .no-overflow .preslfe-izq {
width: calc(60% - 12px) !important;
padding: 2em 4em !important;
background: #ffffff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.preslfe .content.block-content .no-overflow .preslfe-izq h3 {
font-family: var(--font-title) !important;
color: var(--navy-blue) !important;
font-weight: 400 !important;
font-size: 2em;
margin: 0 0 1em;
}
.preslfe .content.block-content .no-overflow .preslfe-izq p {
margin: 0 0 0.9em;
}
.preslfe .content.block-content .no-overflow .preslfe-izq p:last-child {
margin-bottom: 0;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha {
width: calc(40% - 12px) !important;
background-color: #ffffff;
border-radius: 10px;
padding: 1.25em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 18px;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.12);
}
/* Panel azul claro con la ilustración */
.preslfe .content.block-content .no-overflow .preslfe-ilus {
width: 100%;
flex: 1;
background: var(--bg-blue);
border-radius: 10px;
padding: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha img {
width: 100%;
max-width: 260px;
height: auto;
margin-bottom: 0 !important;
}
.preslfe .content.block-content .no-overflow .preslfe-dcha span {
color: var(--light-blue) !important;
font-weight: 700;
font-size: 1.05em;
text-align: center;
padding: 0 0.5em 0.35em;
}
@media (max-width: 767px) {
.preslfe .content.block-content .no-overflow {
flex-direction: column;
}
.preslfe .content.block-content .no-overflow .preslfe-izq,
.preslfe .content.block-content .no-overflow .preslfe-dcha {
width: 100% !important;
}
}
/* INFO SOBRE PUNTOS LFE — aviso azul claro de marca (con icono i) */
.info-puntos .content.block-content {
background: var(--bg-blue) !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 1.15em 1.5em !important;
}
.info-puntos .content.block-content .no-overflow {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.info-puntos .content.block-content .no-overflow .izq {
flex: 0 0 auto;
width: auto;
padding-top: 2px;
}
.info-puntos .content.block-content .no-overflow .dcha {
flex: 1;
width: auto;
padding-right: 0 !important;
color: var(--navy-blue);
line-height: 1.5;
}
.info-puntos .content.block-content .no-overflow .dcha b {
color: var(--navy-blue) !important;
}
/* Icono Material (info relleno) en vez del info.svg */
.info-puntos .izq .material-symbols-outlined {
font-size: 26px;
color: var(--light-blue);
font-variation-settings: 'FILL' 1;
}
/* Título de bloques chromeless: aire vertical uniforme */
.block.chromeless .title.block-title {
padding: 20px 0px !important;
}
/* Excepción: el bloque "Administración" (block_settings) lleva cabecera navy a
ancho completo → su título necesita sangría izquierda para no quedar pegado
al borde, alineado con el resto de bloques. Especificidad extra para ganar
a la regla de arriba. */
.block.chromeless.block_settings .title.block-title {
padding-left: 20px !important;
}
/* --- Títulos y bloques --- */
.title_lfe .title.block-title h2,
#inst789 .title.block-title h2,
#inst216 .title.block-title h2 {
font-family: "IVI Glance", "Noto Sans" !important;
font-weight: bold;
font-size: 26px !important;
}
.title_lfe .content.block-content {
background-color: var(--color-gray-light) !important;
box-shadow: none !important;
padding: 0 !important;
}
/* --- #inst682, #inst7832, #inst352 current_learning dropdowns hidden --- */
#inst682.block_current_learningas #current_learningas .statusselector.dropdown,
#inst7832.block_current_learningas,
#inst352.block_current_learningas #current_learningas .statusselector.dropdown {
display: none !important;
}
/* --- .etiqueta-obligatorio: pastilla rosa del diseño 2026-07-13
(antes cinta coral pegada al borde) --- */
.etiqueta-obligatorio {
position: absolute;
z-index: 99;
background-color: var(--bright-red);
color: #fff;
padding: 5px 12px;
border-radius: 999px;
top: 12px;
left: 12px;
font-size: 12px;
font-weight: 600;
}
/* Cards de curso (current_learning): título sin recorte de
descendentes y barra de progreso en el naranja nuevo */
.block_current_learningas .block_current_learningas-tile__link_title {
line-height: 1.35 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.block_current_learningas .progressbar_container .progress .bar {
background: var(--bright-orange) !important;
}
/* --- Cards de curso Monthly Seminars (#inst287) ---
Imagen: la altura la fija el ::before con padding-top (el % se
calcula sobre el ancho, así siempre da altura; con aspect-ratio en
el div de la foto se colapsaba a 0 por no tener contenido). La foto
encaja al ancho y la ventana mide justo su alto → sin blanco arriba
ni abajo. Título sin line-clamp y etiqueta de vencimiento en rojo. */
#inst287 .block_current_learningas-tile__image,
#inst287 #current_learningas .block_current_learningas-tile__image {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
#inst287 .block_current_learningas-tile__image_ratio,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio {
position: relative !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Proporción del banner: padding-top = 100 / ratio. 38.2% ≈ 2.62:1.
Franja blanca abajo → subir el %; recorte por abajo → bajarlo. */
#inst287 .block_current_learningas-tile__image_ratio::before,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio::before {
content: "" !important;
display: block !important;
width: 100% !important;
padding-top: 38.2% !important;
}
#inst287 .block_current_learningas-tile__image_ratio_img,
#inst287 #current_learningas .block_current_learningas-tile__image_ratio_img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: 100% auto !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
#inst287 .block_current_learningas-tile,
#inst287 .block_current_learningas-tile__content,
#inst287 .block_current_learningas-tile__link,
#inst287 .block_current_learningas-tile__maincontent,
#inst352 .block_current_learningas-tile,
#inst352 .block_current_learningas-tile__content,
#inst352 .block_current_learningas-tile__link,
#inst352 .block_current_learningas-tile__maincontent {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
#inst287 .block_current_learningas-tile__content_duedate,
#inst287 .block_current_learningas-tile__content,
#inst352 .block_current_learningas-tile__content_duedate,
#inst352 .block_current_learningas-tile__content {
position: static !important;
}
#inst287 .block_current_learningas-tile__link_title,
#inst287 #current_learningas .block_current_learningas-tile__link_title,
#inst352 .block_current_learningas-tile__link_title,
#inst352 #current_learningas .block_current_learningas-tile__link_title {
display: block !important;
-webkit-line-clamp: none !important;
line-clamp: none !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* Monthly (#inst287): badge de vencimiento rojo. Externos (#inst352) YA NO
lleva estilo de vencimiento: usa el badge de "Fecha de inscripción"
(.home-due-badge, §30), igual que la home de internos. Por eso se quitó
#inst352 de estas reglas (su especificidad de id + !important tapaba el navy
de .home-due-badge, incluido el icono ::before). */
#inst287 .block_current_learningas-tile__content_duedate_text,
#inst287 #current_learningas .block_current_learningas-tile__content_duedate_text {
background: var(--red) !important;
color: #ffffff !important;
font-weight: 700 !important;
border: none !important;
}
#page-totara-dashboard-6 #inst352 li.block_current_learningas-tile,
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__maincontent {
display: flex !important;
flex-direction: column !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__image {
flex: 0 0 auto !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__maincontent {
flex: 1 1 auto !important;
}
#page-totara-dashboard-6 #inst352 .block_current_learningas-tile__content_duedate {
margin-top: auto !important;
}
/* --- Puntos de excelencia (#inst216, Formación de Excelencia): banda
del título/subtítulo de cada card con su color de marca translúcido
y letra blanca (tile 1 Must Read #AC1D6B 80%, tile 2 Monthly #7B2594
80%, tile 3 Asistencia #622A9C 90%). Sin velo blanco del tema
(::before) ni backdrop-filter. --- */
#inst216 .block-totara-featured-links-tile .block-totara-featured-links-content-container {
background: none;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content {
width: 100%;
padding: 12px 16px 14px;
margin-bottom: -5px;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0) !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content h3,
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content p {
color: #ffffff !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content h3 {
padding: 5px !important;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-content p {
margin-bottom: var(--spacing-small) !important;
font-size: 13px;
}
#inst216 .block-totara-featured-links-tile-1 .block-totara-featured-links-content {
background: rgba(172, 29, 107, 0.8);
}
#inst216 .block-totara-featured-links-tile-2 .block-totara-featured-links-content {
background: rgba(123, 37, 148, 0.8);
}
#inst216 .block-totara-featured-links-tile-3 .block-totara-featured-links-content {
background: rgba(98, 42, 156, 0.9);
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover {
flex-basis: auto;
width: 30% !important;
max-height: 230px;
background-size: cover;
margin-top: -15px;
}
#inst216 .block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover:hover {
opacity: 0.8 !important;
}
/* --- CTA catálogo LFE (rebranding): banner degradado azul→teal --- */
.cta-catalog .content.block-content {
background: linear-gradient(100deg,
var(--light-blue) 0%, #1E7FE0 48%, var(--teal) 100%) !important;
border-radius: 10px !important;
color: #ffffff !important;
padding: 2em 2.5em !important;
box-shadow: none !important;
}
.cta-catalog .no-overflow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-catalog .izq .title {
font-family: var(--font-title);
font-size: 1.7em;
font-weight: 600;
color: #ffffff;
margin: 0 0 6px;
}
.cta-catalog .izq p {
margin: 0;
color: rgba(255, 255, 255, 0.92);
}
.cta-catalog .btn-dcha a {
display: inline-block;
background: #ffffff;
color: var(--light-blue);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.05em;
padding: 12px 26px;
border-radius: 8px;
white-space: nowrap;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.cta-catalog .btn-dcha a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(8, 0, 79, 0.20);
color: var(--blue-hover);
text-decoration: none;
}
/* --- Customizaciones LFE (#inst286 - Formación LFE, .bloque-codigo) --- */
#inst286 {
margin-bottom: 25px;
}
#inst286 thead {
display: none;
}
#inst286 tbody {
display: flex;
flex-direction: row;
gap: var(--gap-4);
flex-wrap: wrap;
align-items: stretch;
}
#inst286 tr {
display: flex;
flex-direction: column;
width: calc(33% - 0.8rem);
border-radius: var(--block-radius);
border: var(--block-border);
box-shadow: var(--block-shadow);
background: var(--block-background-color);
position: relative;
}
#inst286 tr:hover {
box-shadow: var(--shadow-2);
}
#inst286 table.flexible > tbody > tr > td {
border-top: 0px;
}
#inst286 .course_custom_field_10 {
padding: 0px;
height: 152px;
background-image: url(https://isdin-ld.actuatxp.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/course_defaultimage.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-top-right-radius: var(--border-radius-large);
border-top-left-radius: var(--border-radius-large);
}
#inst286 .course_custom_field_10 img {
height: 100%;
width: 100%;
object-fit: cover;
max-width: 100%;
object-position: center;
border-top-left-radius: var(--border-radius-large);
border-top-right-radius: var(--border-radius-large);
}
#inst286 .no-overflow {
overflow: visible;
padding-bottom: 0px;
}
#inst286 .footer a {
display: none;
}
#inst286 .course_completion_duedate {
position: absolute;
top: 105px;
background: #fff;
font-size: 14px;
font-weight: 600;
left: var(--spacing-medium);
}
/* Textos multiidioma para fechas */
.lang-es #inst286 .course_completion_duedate:before {
content: 'Fecha límite:';
}
.lang-en #inst286 .course_completion_duedate:before {
content: 'Due date:';
}
.lang-de #inst286 .course_completion_duedate:before {
content: 'Fälligkeitsdatum:';
}
.lang-fr #inst286 .course_completion_duedate:before {
content: "Date d'échéance:";
}
.lang-it #inst286 .course_completion_duedate:before {
content: 'Data di scadenza:';
}
.lang-zh_cn #inst286 .course_completion_duedate:before {
content: '截止日期:';
}
#inst286 .course_custom_field_2 {
padding: 16px 16px 0px 16px;
text-transform: uppercase;
font-size: 14px;
color: #2A4C59;
font-weight: 600;
}
#inst286 .course_courselink {
padding: 3px 16px 0px;
font-size: 16px;
color: #2a4c59;
font-weight: 600;
}
#inst286 .course_completion_progresspercent {
padding: 16px;
}
#inst286 .totara-table-container .totara-toolbar-top {
display: none;
}
div#region-main #inst286.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
.bloque-codigo {
display: none !important;
}
/* --- Visor de puntos --- */
.visor .fo-completa {
padding: 0.5em 1em;
background-color: #85C99C;
font-weight: bold;
color: white !important;
width: fit-content;
border-radius: 8px;
}
.visor .fo-incompleta {
padding: 0.5em 1em;
background-color: #7A2840;
font-weight: bold;
color: white !important;
width: fit-content;
border-radius: 8px;
}
.title_lfe.visor {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Etiqueta "Puntuación:" + badge en línea y centrados verticalmente */
.title_lfe.visor .lfe-puntuacion {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* El marcador (0/1500) como pastilla tipo "COMPLETA" (verde pastel + punto),
para combinar con los badges de Formación Obligatoria. */
.title_lfe.visor .lfe-visor-puntuacion {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 5px 13px !important;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.5;
margin-left: 0;
background-color: #D6F6EF !important;
color: #00514A !important;
}
/* Punto de color a la izquierda del marcador (como en los badges) */
.title_lfe.visor .lfe-visor-puntuacion::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* --- Bloques de contenido LFE (#inst277-#inst281, #inst9478-#inst9482) --- */
#inst278 thead,
#inst9479 thead,
#inst9480 thead,
#inst9481 thead,
#inst9482 thead,
#inst279 thead,
#inst281 thead,
#inst280 thead {
display: none;
}
#inst277 .footer a,
#inst9478 .footer a,
#inst278 .footer a,
#inst9479 .footer a,
#inst9480 .footer a,
#inst9481 .footer a,
#inst9482 .footer a,
#inst279 .footer a,
#inst280 .footer a,
#inst281 .footer a {
display: none;
}
#inst277 .alert-with-icon,
#inst9478 .alert-with-icon,
#inst278 .alert-with-icon,
#inst9479 .alert-with-icon,
#inst9480 .alert-with-icon,
#inst9481 .alert-with-icon,
#inst9482 .alert-with-icon,
#inst279 .alert-with-icon,
#inst281 .alert-with-icon {
display: none;
}
#inst277 tbody > tr:nth-of-type(odd),
#inst9478 tbody > tr:nth-of-type(odd) {
background-color: white !important;
}
div#region-main #inst277.block .content,
div#region-main #inst9478.block .content,
div#region-main #inst278.block .content,
div#region-main #inst9479.block .content,
div#region-main #inst9480.block .content,
div#region-main #inst9481.block .content,
div#region-main #inst9482.block .content,
div#region-main #inst279.block .content,
div#region-main #inst280.block .content,
div#region-main #inst281.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent;
}
div#region-main #inst277.block .content tbody,
div#region-main #inst9478.block .content tbody,
div#region-main #inst278.block .content tbody,
div#region-main #inst9479.block .content tbody,
div#region-main #inst9480.block .content tbody,
div#region-main #inst9481.block .content tbody,
div#region-main #inst9482.block .content tbody,
div#region-main #inst279.block .content tbody,
div#region-main #inst281.block .content tbody {
background-color: white !important;
}
div#region-main #inst277.block .content tbody td,
div#region-main #inst9478.block .content tbody td,
div#region-main #inst278.block .content tbody td,
div#region-main #inst9479.block .content tbody td,
div#region-main #inst9480.block .content tbody td,
div#region-main #inst9481.block .content tbody td,
div#region-main #inst9482.block .content tbody td,
div#region-main #inst279.block .content tbody td,
div#region-main #inst280.block .content tbody td,
div#region-main #inst281.block .content tbody td {
padding: 12px !important;
}
div#region-main #inst278.block .content tbody td.course_courselinkicon img,
div#region-main #inst9479.block .content tbody td.course_courselinkicon img,
div#region-main #inst9480.block .content tbody td.course_courselinkicon img,
div#region-main #inst9481.block .content tbody td.course_courselinkicon img,
div#region-main #inst9482.block .content tbody td.course_courselinkicon img,
div#region-main #inst279.block .content tbody td.course_courselinkicon img,
div#region-main #inst281.block .content tbody td.course_courselinkicon img {
margin-right: var(--spacing-small);
}
div#region-main #inst278.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9479.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9480.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9481.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst9482.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst279.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst280.block .content tbody > tr:nth-of-type(odd),
div#region-main #inst281.block .content tbody > tr:nth-of-type(odd) {
background-color: #fcfcfc !important;
}
div#region-main #inst277.block .content tbody td:last-child,
div#region-main #inst9478.block .content tbody td:last-child,
div#region-main #inst278.block .content tbody td:last-child,
div#region-main #inst9479.block .content tbody td:last-child,
div#region-main #inst9480.block .content tbody td:last-child,
div#region-main #inst9481.block .content tbody td:last-child,
div#region-main #inst9482.block .content tbody td:last-child,
div#region-main #inst279.block .content tbody td:last-child,
div#region-main #inst280.block .content tbody td:last-child {
text-align: center !important;
}
/* Colores de cabecera por sección (rebranding 2026-07-21: Monthly morado,
Must Read magenta, Certificados violeta, Catálogo navy) */
div#region-main #inst278 .header.block-header,
div#region-main #inst9479 .header.block-header{
background-color: #7B2594 !important;
}
div#region-main #inst279 .header.block-header,
div#region-main #inst9480 .header.block-header{
background-color: #AC1D6B !important;
}
div#region-main #inst280 .header.block-header,
div#region-main #inst9481 .header.block-header
{
background-color: #622A9C !important;
}
div#region-main #inst281 .header.block-header,
div#region-main #inst9482 .header.block-header{
background-color: var(--navy-blue, #08004F) !important;
}
div#region-main #inst278 .header.block-header h2,
div#region-main #inst9479 .header.block-header h2,
div#region-main #inst9480 .header.block-header h2,
div#region-main #inst9481 .header.block-header h2,
div#region-main #inst9482 .header.block-header h2,
div#region-main #inst279 .header.block-header h2,
div#region-main #inst280 .header.block-header h2,
div#region-main #inst281 .header.block-header h2 {
color: white;
padding: 0 var(--spacing-large);
}
div#region-main #inst278 .header.block-header h2::after,
div#region-main #inst9479 .header.block-header h2::after,
div#region-main #inst9480 .header.block-header h2::after,
div#region-main #inst9481 .header.block-header h2::after,
div#region-main #inst9482 .header.block-header h2::after,
div#region-main #inst279 .header.block-header h2::after,
div#region-main #inst280 .header.block-header h2::after,
div#region-main #inst281 .header.block-header h2::after {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/minus-circle.svg');
background-size: contain;
background-repeat: no-repeat;
margin-left: var(--spacing-medium);
vertical-align: middle;
}
/* --- Dashboard externos: carrusel de cursos recomendados (.externos) --- */
#page-totara-dashboard-6 .externos .content.block-content {
background: #fff !important;
border-radius: 0;
box-shadow: none !important;
padding: 1em 0 !important;
}
#page-totara-dashboard-6 .externos .carousel-container {
position: relative;
display: flex;
align-items: stretch;
width: 100% !important;
max-width: none !important;
margin: auto;
padding: 0 60px !important;
overflow: visible !important;
box-sizing: border-box !important;
background: #fff !important;
}
#page-totara-dashboard-6 .externos .carousel {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
padding: 14px 10px !important;
gap: 16px !important;
overflow-x: auto !important;
box-sizing: border-box !important;
scroll-behavior: unset;
scroll-padding: 10px !important;
}
#page-totara-dashboard-6 .externos .carousel::-webkit-scrollbar {
display: none;
}
#page-totara-dashboard-6 .externos .carousel-card {
display: flex;
flex: 0 0 90%;
flex-direction: column;
width: 90%;
min-width: 0;
max-width: 90%;
height: auto !important;
overflow: hidden;
box-sizing: border-box;
background: #fff !important;
border-radius: var(--spacing-small);
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
scroll-snap-align: start;
}
#page-totara-dashboard-6 .externos .carousel-card img {
width: 100% !important;
height: 140px !important;
margin: 0 !important;
object-fit: cover !important;
}
#page-totara-dashboard-6 .externos .carousel-card .atto_image_button_text-bottom.img-responsive {
max-width: 100% !important;
}
#page-totara-dashboard-6 .externos .card-content {
flex-grow: 1;
max-height: none !important;
padding: 14px !important;
}
#page-totara-dashboard-6 .externos .card-content h3 {
margin-bottom: var(--spacing-small);
color: var(--color-secondary-dark) !important;
font-size: 15px !important;
}
#page-totara-dashboard-6 .externos .card-content p {
color: var(--color-text-gray);
font-size: 14px;
}
#page-totara-dashboard-6 .externos .card-content .datos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: 8px 16px !important;
margin-top: var(--spacing-medium);
margin-right: 0 !important;
}
/* Iconos del HTML actual: Material Symbols en azul, sin los SVG legacy. */
#page-totara-dashboard-6 .externos .datos .material-symbols-outlined {
color: var(--light-blue, #004DF0) !important;
font-size: 19px !important;
line-height: 1 !important;
margin-right: 5px !important;
vertical-align: middle !important;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
#page-totara-dashboard-6 .externos .fecha-inicio::before,
#page-totara-dashboard-6 .externos .ecmecs::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
}
#page-totara-dashboard-6 .externos .card-footer {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
padding: var(--spacing-medium);
}
#page-totara-dashboard-6 .externos .matricula {
margin-top: var(--spacing-small);
}
#page-totara-dashboard-6 .externos .btn-info {
padding: 8px var(--spacing-medium);
border: none;
border-radius: 999px !important;
background: var(--light-blue);
color: #fff !important;
cursor: pointer;
}
#page-totara-dashboard-6 .externos .btn-info:hover,
#page-totara-dashboard-6 .externos .btn-info:focus {
background: var(--blue-hover, #0038C4) !important;
color: #fff !important;
}
/* Flechas centradas dentro de canaletas laterales de 60px. */
#page-totara-dashboard-6 .externos .carousel-btn {
position: absolute;
top: 50% !important;
z-index: 10;
width: 44px !important;
height: 44px !important;
padding: var(--spacing-small);
transform: translateY(-50%);
border: none;
border-radius: 50%;
background: #004DF080;
color: #fff;
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#page-totara-dashboard-6 .externos .carousel-btn:hover {
background: var(--light-blue);
}
#page-totara-dashboard-6 .externos .prev {
left: 8px !important;
}
#page-totara-dashboard-6 .externos .next {
right: 8px !important;
}
/* Tablet: tres tarjetas completas. */
@media (min-width: 768px) and (max-width: 1199px) {
#page-totara-dashboard-6 .externos .carousel-card {
flex: 0 0 calc((100% - 32px) / 3) !important;
width: calc((100% - 32px) / 3) !important;
min-width: 0 !important;
max-width: calc((100% - 32px) / 3) !important;
}
}
/* Pantallas grandes: cuatro tarjetas completas y tres gaps de 16px. */
@media (min-width: 1200px) {
#page-totara-dashboard-6 .externos .carousel-card {
flex: 0 0 calc((100% - 48px) / 4) !important;
width: calc((100% - 48px) / 4) !important;
min-width: 0 !important;
max-width: calc((100% - 48px) / 4) !important;
}
}
/* ============================================================
5. DASHBOARD EXPEDIENTE — #page-totara-dashboard-16
============================================================ */
#page-totara-dashboard-16 .block-region {
padding: 0 2em;
}
#page-totara-dashboard-16 .totara-toolbar.totara-toolbar-top.clearfix {
display: none;
}
#inst8148 .footer a,
#inst8154 .footer a,
#inst8161 .footer a,
#inst8378 .footer a,
#inst11363 .footer a {
display: none;
}
#inst8148 thead tr th,
#inst8154 thead tr th,
#inst8378 thead tr th,
#inst11363 thead tr th {
background-color: #52b4bb;
color: white;
padding: 14px;
}
#inst8148 thead tr th.course_courselink,
#inst8154 thead tr th.course_courselink,
#inst8378 thead tr th.evidence_custom_field_1,
#inst11363 thead tr th.course_courselink {
border-top-left-radius: var(--border-radius);
}
#inst8154 thead tr th.course_completion_status,
#inst8148 thead tr th.c5,
#inst8378 thead tr th:last-child,
#inst11363 thead tr th:last-child {
border-top-right-radius: var(--border-radius);
}
.tenant-user-ext #inst8148 .course_category_name,
.tenant-user-ext #inst8154 .course_category_name,
.tenant-user-ext #inst11363 .course_category_name {
display: none;
}
#inst8148 thead a,
#inst8154 thead a,
#inst8378 thead a,
#inst11363 thead a {
color: white !important;
}
div#region-main #inst8148.block .content tbody td,
#inst8154.block .content tbody td,
#inst8378.block .content tbody td {
padding: 14px !important;
}
h2#instance-8378-header {
font-weight: 300 !important;
font-size: 1.2em;
}
/* ============================================================
6. DASHBOARD PNTs — #page-totara-dashboard-33
============================================================ */
/* --- Informe PNTs Globales (inst10607 / inst11103 / inst11136) --- */
#page-totara-dashboard-33 #inst10607 table.totaratable,
#page-totara-dashboard-33 #inst11103 table.totaratable,
#page-totara-dashboard-33 #inst11136 table.totaratable {
display: block !important;
width: 100% !important;
border-collapse: unset !important;
border-spacing: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tbody,
#page-totara-dashboard-33 #inst11103 table.totaratable tbody,
#page-totara-dashboard-33 #inst11136 table.totaratable tbody {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
padding: 20px !important;
box-sizing: border-box !important;
width: 100% !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tr,
#page-totara-dashboard-33 #inst11103 table.totaratable tr,
#page-totara-dashboard-33 #inst11136 table.totaratable tr {
display: block !important;
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
border: 1px solid #e5e7eb !important;
transition: box-shadow 0.2s ease !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable tr:hover,
#page-totara-dashboard-33 #inst11103 table.totaratable tr:hover,
#page-totara-dashboard-33 #inst11136 table.totaratable tr:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
cursor: pointer !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 {
display: block !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 500 !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0::before,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0::before,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0::before {
content: '' !important;
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background: url('https://ivirmacampus.com/pluginfile.php/1/course/defaultcourseimage/2545/microscopio-lwfi7vnuibs.jpg') center / cover no-repeat !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td .course_icon,
#page-totara-dashboard-33 #inst11103 table.totaratable td .course_icon,
#page-totara-dashboard-33 #inst11136 table.totaratable td .course_icon {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a::before,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a::before,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a::before {
content: 'CURSO' !important;
display: block !important;
font-size: 11px !important;
font-weight: bold !important;
color: var(--color-primary) !important;
letter-spacing: 0.05em !important;
margin-bottom: 4px !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a {
display: block !important;
padding: 12px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--navy-blue) !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0 a:hover,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0 a:hover,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0 a:hover {
text-decoration: underline !important;
color: var(--light-blue) !important;
}
#page-totara-dashboard-33 #inst10607 table.totaratable td.c0::after,
#page-totara-dashboard-33 #inst11103 table.totaratable td.c0::after,
#page-totara-dashboard-33 #inst11136 table.totaratable td.c0::after {
content: '' !important;
display: block !important;
height: 4px !important;
background: #e5e7eb !important;
margin: 4px 12px 12px !important;
border-radius: 4px !important;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container,
#page-totara-dashboard-33 #inst11103 .totara-table-container,
#page-totara-dashboard-33 #inst11136 .totara-table-container {
display: block !important;
margin-top: 12px;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst11103 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst11136 .totara-table-container .totara-toolbar-top,
#page-totara-dashboard-33 #inst10607 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst11103 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst11136 .totara-table-container .totara-toolbar-bottom,
#page-totara-dashboard-33 #inst10607 .totara-table-container .paging,
#page-totara-dashboard-33 #inst11103 .totara-table-container .paging,
#page-totara-dashboard-33 #inst11136 .totara-table-container .paging {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .totara-table-container table.totaratable,
#page-totara-dashboard-33 #inst11103 .totara-table-container table.totaratable,
#page-totara-dashboard-33 #inst11136 .totara-table-container table.totaratable {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .rb-report-svggraph,
#page-totara-dashboard-33 #inst11103 .rb-report-svggraph,
#page-totara-dashboard-33 #inst11136 .rb-report-svggraph {
display: none !important;
}
#page-totara-dashboard-33 #inst10607 .pnts-filter-bar,
#page-totara-dashboard-33 #inst11103 .pnts-filter-bar,
#page-totara-dashboard-33 #inst11136 .pnts-filter-bar {
padding: 12px 15px;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
background: transparent !important;
background-color: transparent !important;
border-bottom: 0 !important;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li {
padding: 0;
margin: 0;
float: none;
}
/* Selectores (filtros) con estilo de botón azul light */
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li a,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li a,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li a {
display: inline-block;
margin: 0;
padding: 8px 18px;
border: 1.5px solid var(--light-blue, #004DF0);
border-radius: 999px;
background: transparent;
color: var(--light-blue, #004DF0) !important;
font-weight: 600;
transition: all 0.15s ease;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li a:hover,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li a:hover,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li a:hover {
background: var(--light-blue, #004DF0);
color: #ffffff !important;
}
#page-totara-dashboard-33 #inst10607 .nav.nav-tabs li.active a,
#page-totara-dashboard-33 #inst11103 .nav.nav-tabs li.active a,
#page-totara-dashboard-33 #inst11136 .nav.nav-tabs li.active a {
background: var(--light-blue, #004DF0);
border-color: var(--light-blue, #004DF0);
color: #ffffff !important;
border-radius: 999px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tiles-wrap,
#page-totara-dashboard-33 #inst11103 .pnts-tiles-wrap,
#page-totara-dashboard-33 #inst11136 .pnts-tiles-wrap {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px;
align-items: stretch;
grid-auto-flow: row dense;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile,
#page-totara-dashboard-33 #inst11103 .pnts-tile,
#page-totara-dashboard-33 #inst11136 .pnts-tile {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-2);
transition: box-shadow 0.2s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile:hover,
#page-totara-dashboard-33 #inst11103 .pnts-tile:hover,
#page-totara-dashboard-33 #inst11136 .pnts-tile:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
cursor: pointer;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__img,
#page-totara-dashboard-33 #inst11103 .pnts-tile__img,
#page-totara-dashboard-33 #inst11136 .pnts-tile__img {
width: 100%;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
max-height: 180px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__body,
#page-totara-dashboard-33 #inst11103 .pnts-tile__body,
#page-totara-dashboard-33 #inst11136 .pnts-tile__body {
padding: 20px 20px 40px;
flex: 1;
display: flex;
flex-direction: column;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__type,
#page-totara-dashboard-33 #inst11103 .pnts-tile__type,
#page-totara-dashboard-33 #inst11136 .pnts-tile__type {
display: block;
font-size: 11px;
font-weight: bold;
color: var(--text-gray, #8A8A9E);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__title,
#page-totara-dashboard-33 #inst11103 .pnts-tile__title,
#page-totara-dashboard-33 #inst11136 .pnts-tile__title {
font-size: var(--font-size-16);
font-weight: bold;
color: var(--navy-blue);
line-height: 1.4;
margin: 0 0 10px;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
font-size: 12px;
font-weight: 700;
color: #ffffff;
padding: 6px 10px;
border-radius: 999px;
text-transform: none;
line-height: 1;
letter-spacing: 0.01em;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--success,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--success,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--success {
background: var(--teal, #0CE3C6);
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--warning,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--warning,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--warning {
background: #F5A623;
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--orange,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--orange,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--orange {
background: var(--bright-orange, #FC814C);
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--danger,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--danger,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--danger {
background: var(--orange, #E9482A);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--completed,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--completed,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--completed {
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1.5px solid var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge--completed i,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge--completed i,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge--completed i {
color: var(--navy-blue, #08004F);
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip {
font-weight: 400;
position: absolute;
line-height: 1.5rem;
top: calc(100% + 3px);
left: 0;
min-width: 300px;
max-width: 450px;
background: #ffffffe6;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 5px;
padding: 5px 15px 10px 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
z-index: 3;
pointer-events: none;
}
#page-totara-dashboard-33 #inst10607 .pnts-tile__badge:hover .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11103 .pnts-tile__badge:hover .pnts-badge-tooltip,
#page-totara-dashboard-33 #inst11136 .pnts-tile__badge:hover .pnts-badge-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__title,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__title,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__title {
font-size: 12px;
font-weight: 700;
margin-bottom: 6px;
color: #111827;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__item,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__item,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #374151;
margin-top: 4px;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
}
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--success,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--success,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--success { background: var(--teal, #0CE3C6); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--warning,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--warning,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--warning { background: #F5A623; }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--orange,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--orange,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--orange { background: var(--bright-orange, #FC814C); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--danger,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--danger,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--danger { background: var(--orange, #E9482A); }
#page-totara-dashboard-33 #inst10607 .pnts-badge-tooltip__dot--completed,
#page-totara-dashboard-33 #inst11103 .pnts-badge-tooltip__dot--completed,
#page-totara-dashboard-33 #inst11136 .pnts-badge-tooltip__dot--completed {
background: #ffffff;
border: 1px solid var(--color-primary, #0F6C72);
}
#page-totara-dashboard-33 #inst10607 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst11103 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst11136 .progress.progress-success .bar,
#page-totara-dashboard-33 #inst10607 .progress-success .bar,
#page-totara-dashboard-33 #inst11103 .progress-success .bar,
#page-totara-dashboard-33 #inst11136 .progress-success .bar {
background-color: var(--light-blue) !important;
background-image: none !important;
}
/* --- Mandatory SOPs (inst10360) --- */
#page-totara-dashboard-33 #inst10360 .tabtree ul.nav.nav-tabs {
margin: 0px 12px;
padding: 10px 8px 12px 10px;
background: none !important;
}
#page-totara-dashboard-33 #inst10360 .nav.nav-tabs li {
padding-right: 20px;
padding-bottom: 8px;
}
#page-totara-dashboard-33 #inst10360 .content.block-content {
border-radius: 10px !important;
overflow: hidden !important;
}
#page-totara-dashboard-33 #inst10360 .block .block-header {
padding-top: 3rem !important;
}
#page-totara-dashboard-33 #inst10360 .panel-footer {
border-top: 0 !important;
padding: 0 20px 20px 20px !important;
}
#page-totara-dashboard-33 #inst10360 .block_current_learningas-tiles {
padding: 30px 15px 30px 15px;
}
#page-totara-dashboard-33 #inst10360 .content.block-content {
margin:5px;
}
.pnts-empty-msg {
text-align: center;
padding: 0px 20px;
}
/* --- PNTs Completados (inst10405) dentro dashboard-33 --- */
#page-totara-dashboard-33 #inst10405 .totara-table-container .totara-toolbar-top {
display: none !important;
}
#page-totara-dashboard-33 #inst10405 #instance-10405-header {
padding-top: 10px;
}
#page-totara-dashboard-33 #inst10405 .totara-table-container .toolbar-cell {
padding: 10px 20px !important;
}
#page-totara-dashboard-33 #report_finalizacion_del_curso_incluye_historial th.c2,
#page-totara-dashboard-33 #report_finalizacion_del_curso_incluye_historial td.c2 {
display: none !important;
}
/* Paginación activa */
#page-totara-dashboard-33 [class*="pagination"] .active,
#page-totara-dashboard-33 [class*="pagination"] .current,
#page-totara-dashboard-33 [class*="paging"] .active,
#page-totara-dashboard-33 [class*="paging"] .current,
#page-totara-dashboard-33 [class*="pager"] .active,
#page-totara-dashboard-33 [class*="pager"] .current {
font-weight: bold !important;
text-decoration: underline !important;
color: #0F6C72 !important;
pointer-events: auto !important;
}
/* Barra de búsqueda PNTs */
#page-totara-dashboard-33 .pnts-search-container {
display: flex;
align-items: center;
gap: 12px;
padding: 0 5px 8px 5px;
}
#page-totara-dashboard-33 .pnts-search-box {
position: relative;
flex: 1;
min-width: 220px;
max-width: 400px;
}
#page-totara-dashboard-33 .pnts-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 14px;
pointer-events: none;
z-index: 1;
}
#page-totara-dashboard-33 .pnts-search-input {
width: 100%;
padding: 10px 38px 10px 38px;
border: 1.5px solid #e5e7eb;
border-radius: 25px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
#page-totara-dashboard-33 .pnts-search-input:focus {
border-color: var(--color-primary, #0F6C72);
box-shadow: 0 0 0 3px rgba(15, 108, 114, 0.12);
}
#page-totara-dashboard-33 .pnts-search-input::placeholder {
color: #9ca3af;
font-style: italic;
}
#page-totara-dashboard-33 .pnts-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
font-size: 14px;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s ease, background 0.15s ease;
text-decoration: none;
}
#page-totara-dashboard-33 .pnts-search-clear:hover {
color: #1f2937;
background: #f3f4f6;
}
/* Paginación personalizada PNTs */
#page-totara-dashboard-33 #inst10607 .pnts-pagination,
#page-totara-dashboard-33 #inst11103 .pnts-pagination,
#page-totara-dashboard-33 #inst11136 .pnts-pagination {
display: flex;
justify-content: center;
padding: 4px 20px 20px;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__list,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__list,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
flex-wrap: wrap;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item a {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
border: 1.5px solid #e5e7eb;
background: #ffffff;
color: #374151;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: all 0.15s ease;
cursor: pointer;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item a:hover,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item a:hover,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item a:hover {
background: #f3f4f6;
border-color: var(--color-primary, #0F6C72);
color: var(--color-primary, #0F6C72);
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item.active a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item.active a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item.active a {
background: var(--color-primary, #0F6C72) !important;
border-color: var(--color-primary, #0F6C72) !important;
color: #ffffff !important;
font-weight: 700;
}
#page-totara-dashboard-33 #inst10607 .pnts-pagination__item.disabled a,
#page-totara-dashboard-33 #inst11103 .pnts-pagination__item.disabled a,
#page-totara-dashboard-33 #inst11136 .pnts-pagination__item.disabled a {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
7. CATÁLOGO
============================================================ */
.block_slickslider.catalog_hero .elslide div.nolink {
border-radius: 40px !important;
}
#page-content #text {
display: none !important;
}
#page-totara-catalog-index .tw-catalogItemNarrow__image {
padding-top: 55%;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f017";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f073";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
/* (Retirada la regla vieja del id_netex que ocultaba la 2.ª línea a tenant-user;
ahora la visibilidad de metadatos la gestiona el JS inyectado del catálogo.) */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item.itemtype {
color: var(--color-secondary) !important;
font-weight: 500 !important;
}
#page-totara-catalog-index .catalog__content .tw-selectRegionPanel.tw-selectRegionPanel__hiddenOnSmall {
min-width: 200px !important;
}
@media (min-width: 500px) {
#page-totara-catalog-index .catalog__content .tw-catalog__aside {
padding-right: var(--spacing-small) !important;
}
#page-totara-catalog-index .tw-selectRegionPanel.tw-selectRegionPanel__hiddenOnSmall {
min-width: 210px !important;
}
}
#page-totara-catalog-index .tw-catalogResultsShare__btn.btn,
#page-totara-catalog-index .tw-catalog__page_heading h2 {
display: none;
}
#page-totara-catalog-index .tw-catalog__results {
padding: 0 1em;
}
/* Filtros catálogo */
/* Ocultar para todos los usuarios el selector primario "Filtrar por sección"
(campo Filtro_bloque). El prefijo del urlkey es estable entre entornos y no
afecta al buscador, que vive en el selector primario contiguo. */
#page-totara-catalog-index .tw-catalog__primaryFilter .tw-selectRegionPrimary__selector:has([data-tw-selecttree-urlkey^="cfb_menu_filtrobloquemla"]) {
display: none !important;
}
#page-totara-catalog-index.tenant-user section.tw-selectRegionPanel__selector:has([id^="cfp_menu_acreditacionmla"]) {
display: none;
}
/* "Área temática" EXTERNA (areaextreaexter): oculta por defecto para todos; los
externos la reactivan más abajo. Por prefijo de campo (no por instancia). */
#page-totara-catalog-index .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_areaextreaexter"]) {
display: none;
}
/* Externos (tenant-user-ext): en el panel de filtros dejar "Área temática"
(la externa: areaextreaexter), "Idioma" y "Acreditación". Se ocultan TODOS los
grupos del panel y se reactivan esos por su PREFIJO de campo estable (no por el
sufijo de instancia _xxxxx, que cambia entre tenants/entornos). El recuadro
"FILTROS" (.tw-selectRegionPanel__heading) no es un __selector, así que no se
oculta. La reactivación de "Acreditación" gana también a la regla general
.tenant-user que la ocultaba (por !important + mayor especificidad del :has). */
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector {
display: none !important;
}
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_areaextreaexter"]),
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_idiomamlangesid"]),
#page-totara-catalog-index.tenant-user-ext .tw-selectRegionPanel__selector:has([id^="cfp_menu_acreditacionmla"]) {
display: block !important;
}
/* Filtros de idiomas: dejar SOLO EN y ES (por prefijo de campo, cubre cualquier
instancia _xxxxx del filtro Idioma en cualquier tenant) */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_multiselect_idiomamlangesid"] .tw-selectMulti__list li:not(:has([data-tw-selectmulti-optionkey="EN"])):not(:has([data-tw-selectmulti-optionkey="ES"])) {
display: none;
}
/* Norteamérica (tenant-user-nam): ocultar los grupos «Idioma» y «LFE/Filtro_bloque»
del panel (queda visible «Área temática» general, sin OneTech). Por PREFIJO de
campo estable, no por sufijo de instancia _xxxxx (que varía por tenant). */
#page-totara-catalog-index.tenant-user-nam .tw-selectRegionPanel__selector:has([id^="cfp_multiselect_idiomamlangesid"]),
#page-totara-catalog-index.tenant-user-nam .tw-selectRegionPanel__selector:has([id^="cfp_menu_filtrobloquemla"]) {
display: none !important;
}
/* Filtro "Filtro_bloque" (custom field filtrobloquemla): dejar visible SOLO la
opción "Curso de Excelencia LFE" en los 6 idiomas. Se targetea por su optionkey
estable (NO por posición): así no depende del orden alfabético —que cambia por
idioma— ni de la clase .lang-XX del body (que iba con combinador descendiente y
no casaba). Mismo patrón que el filtro de idiomas de arriba. El sufijo del id
(_39281) puede cambiar entre entornos → se usa ^= sobre el prefijo estable. */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_menu_filtrobloquemla"] .tw-selectMulti__list li:not(:has([data-tw-selectmulti-optionkey^="%7Bmlang%20es%7DCurso%20de%20Excelencia%20LFE"])) {
display: none;
}
/* Filtro "Área temática" (areatematicamla): ocultar la opción "OneTech".
Se targetea por su optionkey estable; ^= en el id cubre las dos instancias
del filtro (_6da85 y _16616) y sobrevive al cambio de sufijo entre entornos */
#page-totara-catalog-index [data-tw-selectmulti-key^="cfp_menu_areatematicamla"] .tw-selectMulti__list li:has([data-tw-selectmulti-optionkey="OneTech"]) {
display: none;
}
#page-totara-catalog-index .tw-selectMulti__link_active,
#page-totara-catalog-index .tw-selectMulti__link:hover {
background: #fcefec;
}
/* Detalles catálogo externos */
.course-description .info-externos {
display: flex;
justify-content: space-between;
}
.course-description .info-externos a {
background-color: var(--color-secondary);
border-radius: 25px;
padding: 12px 25px;
color: white !important;
font-size: 1.1em;
font-weight: 500;
}
.course-description .info-externos a:hover {
background-color: var(--color-secondary-dark);
}
a.courserating-resume-lite {
display: none;
}
.info-catalogo {
margin-top: var(--spacing-xl);
display: flex;
justify-content: space-between;
}
.info-catalogo .info-izq {
width: 65%;
}
.info-catalogo .img {
max-width: 33%;
}
.info-cat-lfe {
background-color: #f0f5f6;
padding: 1.5em;
border-radius: var(--border-radius);
font-weight: 500;
color: var(--color-secondary-dark);
width: 65%;
}
#page-totara-catalog-index .tw-catalog .tw-catalogItemNarrow__textarea_group_item:nth-child(3) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
clip: rect(0, 0, 0, 0) !important;
}
/* Dashboard tenants - bloques featured links */
#inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content::before, #inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content::before,
#inst9363 .block-totara-featured-links-layout .block-totara-featured-links-content::before,
#inst9367 .block-totara-featured-links-layout .block-totara-featured-links-content::before, #inst9453 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0.0)!important;
}
#inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3 {
color:white!important;
font-size:0.95em!important;
padding-bottom:5px!important;
}
#inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3,
#inst9363 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3, #inst9367 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3, #inst9453 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3{
color:white!important;
padding-bottom:5px!important;
}
#inst9321 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom p, #inst9320 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom p{
color:white!important;
margin-top:-7px!important;
}
.block-totara-featured-links-layout .block-totara-featured-links-tile.background-cover:hover {
opacity: 0.8 !important;
}
.block-totara-featured-links-layout.align-left.square {
margin-top:0px!important;
margin-bottom:20px!important;
}
#inst216 .block-totara-featured-links-layout.align-left.square {
margin-top:20px!important;
}
#inst9372 .block-totara-featured-links-layout .block-totara-featured-links-content::before {
background: rgba(255, 255, 255, 0.0)!important;
}
#inst9372 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3{
color:white!important;
padding-bottom:5px!important;
}
/* Reportbuilder */
*:has(header input[name="id"][value="211"]) form#totara_reportbuilder_viewsavedsearch,
*:has(header input[name="id"][value="211"]) form.rb-search.mform,
*:has(header input[name="id"][value="211"]) form#totara_reportbuilder_viewsavedsearch,
*:has(header input[name="id"][value="211"]) form.rb-search.mform,
*:has(header input[name="id"][value="211"]) .box.reportbuilder-description {
display: none !important;
}
/* #inst9331 informe panel */
#inst9331 .totara-table-container .totara-toolbar-top {
display:none!important;
}
#inst9331 thead tr th {
background-color: #438693;
color: white;
padding: 14px;
}
#inst9331 thead a {
color: white!important;
}
/* #inst507 padding */
#inst507 .content.block-content {
padding: 0 !important;
}
/* Ocultación de filtros */
#inst350 .dropdown-toggle,
#inst287 .dropdown-toggle {
display: none;
}
/* ============================================================
8. CATEGORÍAS — #page-course-index-category
============================================================ */
#page-course-index-category.tenant-user .categorypicker {
display: none;
}
#page-course-index-category .course_category_tree .category .info {
border: none !important;
margin-bottom: var(--spacing-xl);
}
#page-course-index-category .course_category_tree .category > .content {
border: none !important;
}
#page-course-index-category .ft-fw {
font-size: 20px;
color: var(--color-secondary);
}
/* ============================================================
9. INFORMACIÓN DEL CURSO — #page-course-info / #page-enrol-index
============================================================ */
#page-course-info .coursefeatures > div.alert,
#page-enrol-index .coursefeatures > div.alert {
display: none;
}
#page-enrol-index .coursefeatures .box .btn {
margin-bottom: var(--spacing-medium);
}
#page-enrol-index .main #text {
display: none;
}
#page-enrol-index #usersfeedback {
display: none;
}
/* Fix temporal páginas curso */
#page-enrol-index div[role="main"],
#page-course-info div[role="main"] {
font-size: 0;
}
#page-enrol-index div[role="main"] .row,
#page-course-info div[role="main"] .row {
font-size: var(--font-body-size);
}
#page-enrol-index div[role="main"] > p > a,
#page-course-info div[role="main"] > p > a {
display: none;
}
/* Face to face */
.mod_facetoface__eventinfo.mod_facetoface__event_details .mod_facetoface__eventinfo__sidebar__panel {
background-color: #f0f4f5 !important;
}
.mod_facetoface__eventinfo__sidebar__panel #fitem_id_managername .felement.fstatic {
font-weight: bold;
}
h3.mod_facetoface__eventinfo__content__eventdetail__heading {
font-size: 22px !important;
}
.mod_facetoface__eventinfo__sidebar__panel form {
margin: auto;
}
/* ============================================================
10. VISTA DE CURSO — #page-course-view-*
============================================================ */
/* --- #page-course-view-onetopicas --- */
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:hover,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:focus,
#page-course-view-onetopicas .course-content .nav-tabs > li.active > a:active {
background: var(--color-primary-light);
border-top: 0;
color: white !important;
border-radius: var(--border-radius-small);
box-shadow: none;
}
/* Se reduce el espacio del título de la actividad para que no se desplace el check*/
#page-course-view-onetopicas .section .activity .activityinstance{
width:95%;
}
#page-course-view-onetopicas .course-content .nav-tabs > li > a {
color: var(--color-text-light) !important;
font-weight: 500;
}
#page-course-view-onetopicas .section li.activity {
padding: 0;
}
#page-course-view-onetopicas .section .activity .activityinstance {
margin: 5px 0 9px 0;
font-weight: 500;
color: var(--color-primary-light);
}
#page-course-view-onetopicas .actions span.completion-auto-n,
#page-course-view-onetopicas .actions span.completion-auto-n:before {
margin-bottom: -15px;
}
#page-course-view-onetopicas .actions span.completion-auto-y,
#page-course-view-onetopicas .actions span.completion-auto-y:before,
#page-course-view-onetopicas .actions span.ft-state-success,
#page-course-view-onetopicas .actions span.ft-state-success:before {
margin-bottom: -13px;
}
/* Botón de finalización manual en contentafterlink: evita movimiento y tooltip */
.contentafterlink .actions .btn.btn-link,
.contentafterlink .actions .btn.btn-link:hover,
.contentafterlink .actions .btn.btn-link:focus {
transform: none !important;
transition: none !important;
vertical-align: middle !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
box-shadow: none !important;
}
.contentafterlink .actions span.completion-manual-n,
.contentafterlink .actions span.completion-manual-n::before,
.contentafterlink .actions span.completion-manual-y,
.contentafterlink .actions span.completion-manual-y::before,
.contentafterlink .actions span.flex-icon {
pointer-events: none !important;
transform: none !important;
transition: none !important;
}
#page-course-view-onetopicas .section .activity .contentafterlink {
background-color: #f0f5f680;
padding: 1em 0.5em 0 1em;
border-radius: 12px 0 0 0;
margin-left: 65px;
margin-top:0px!important;
}
#page-course-view-topics .course-content h3.sectionname {
color: var(--color-link-lateral-block);
}
.format-topcollas .content.sectionhidden {
display: none !important;
}
/* --- .course-description y sub-selectores --- */
.course-description .course-overview .introduction {
background-color: var(--color-background) !important;
padding: 1em;
border-radius: var(--border-radius);
}
.course-description .course-overview .introduction .profes {
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
justify-content: space-between;
}
.course-description .course-overview .introduction .profes {
gap: var(--spacing-small);
}
.course-description .course-overview .introduction .profes div {
background-color: white !important;
padding: 12px var(--spacing-small);
border-radius: 8px;
display: flex;
align-items: center;
width: 100%;
}
.course-description .course-overview .introduction .profes .coordination {
margin-right: var(--spacing-small);
}
.course-description .course-overview .introduction .profes div b {
color: var(--light-blue) !important; /* azul corporativo (antes teal #008897) */
margin-right: 5px;
font-weight: 500 !important;
}
.course-description h4,
.seccion-eval h4 {
font-size: 17px !important;
color: var(--color-text-gray) !important;
}
.course-description .competencias {
border-left: 2px solid #52b4bb40;
}
.course-description .competencias ul li::marker {
color: var(--color-secondary-dark) !important;
}
.course-description .detalles {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
justify-content: space-between;
}
.course-description .detalles .icon-text {
flex: 1;
min-width: 180px;
background: var(--color-background) !important; /* antes --color-gray-light */
padding: var(--spacing-medium);
border-radius: var(--border-radius);
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
gap: 12px;
text-align: left;
justify-content: space-between;
}
.course-description .detalles .icon-text img {
width: 50px !important;
margin: 0 0 0.5em 0.5em !important;
}
.course-description .detalles .icon-text .text-box span {
font-weight: bold !important;
color: var(--navy-blue) !important; /* antes #e39282 (naranja) */
text-transform: uppercase;
}
.course-description .accreditation {
background-color: var(--color-background) !important; /* antes --color-gray-light */
padding: 1em 0 0 1em;
border-radius: var(--border-radius);
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: wrap;
}
.course-description .accreditation .izq {
width: 76%;
padding-bottom: 1em;
}
.course-description .accreditation .izq b {
color: var(--light-blue) !important; /* antes #2d6874 (teal) */
}
.course-description .accreditation .img-dcha {
width: 24%;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.course-description .accreditation .img-dcha .atto_image_button_text-bottom {
width: auto !important;
padding: 0 !important;
margin-right: 0px !important;
}
.course-description .compatibility {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-large);
margin-bottom: 1em !important;
}
.course-description .compatibility p {
flex: 2;
margin: 0;
color: var(--color-text-gray);
max-width: 60%;
}
.course-description .navegador {
flex: 1;
display: flex;
justify-content: flex-end;
}
.course-description .navegador img {
max-width: 100%;
width: 300px;
height: auto;
}
.course-description .ventanas_em {
display: flex;
padding: 1em var(--spacing-small) 0px 0px;
}
.course-description .ventanas_em .izq img {
width: 70px;
margin: 0 var(--spacing-large) 0 0;
height: auto;
}
/* --- .seccion-eval --- */
.seccion-eval h4 {
margin: 0 !important;
}
.seccion-eval li.activity.label.modtype_label:has(h4) {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.tab_content.tab_level_0.dimmed {
display: none !important;
}
/* --- Visual grid --- */
.category-61.format-visualgrid #section-0 .section li.activity a.visualgridimg {
background-size: contain !important;
background-position-y: top !important;
}
#page-course-view-visualgrid.format-visualgrid #section-0 .activityinstancezero h2 {
font-family: var(--font-title) !important; /* antes 'Gotham' (legacy) */
color: #3b8596;
letter-spacing: 0;
}
/* --- Tablas form-obligatoria y form-excelencia --- */
.summary table.form-obligatoria,
.summary table.form-excelencia {
background-color: white !important;
border-radius: var(--border-radius) !important;
width: 100% !important;
}
.summary table.form-obligatoria thead,
.summary table.form-excelencia thead {
background-color: var(--light-blue, #004DF0);
color: #fff;
font-size: 18px;
}
.summary table.form-obligatoria thead th,
.summary table.form-excelencia thead th {
padding: var(--spacing-small) !important;
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}
.summary table.form-obligatoria tbody td,
.summary table.form-excelencia tbody td {
padding: 5px var(--spacing-small) !important;
}
.summary table.form-obligatoria tbody td:has(strong),
.summary table.form-excelencia tbody td:has(strong) {
background-color: var(--bg-blue, #DCE6FF);
color: var(--navy-blue, #08004F);
text-align: left !important;
}
.summary table.form-excelencia tbody .excelencia td {
background-color: var(--teal, #0CE3C6) !important;
padding: var(--spacing-small) !important;
color: var(--navy-blue, #08004F) !important;
text-transform: uppercase;
font-size: 1em !important;
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}
.summary table.form-excelencia tbody td:last-child {
text-align: right;
border-left: 2px solid var(--border-soft, #E4E2EE);
}
.summary table.form-excelencia tbody .excelencia td:last-child {
text-align: right !important;
border-left: 2px solid rgba(8, 0, 79, 0.15);
}
/* --- .course-icon-text, .icon-text --- */
.course-icon-text {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.icon-text {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-text img {
width: 130px;
}
.icon-text span {
text-align: center;
}
/* --- .lfe h3, .tutor_lfe, .lfe .icon-text --- */
.lfe h3 {
font-size: 18px;
margin-bottom: var(--spacing-medium);
}
.tutor_lfe {
color: var(--color-primary);
font-weight: 700;
}
.lfe .icon-text img {
max-width: 35px !important;
margin-bottom: var(--spacing-medium);
}
.lfe .icon-text {
text-align: center;
}
.course-icon-text.lfe {
margin-top: var(--spacing-xl);
}
/* --- .format-pathway --- */
.format-pathway .tui-formBtnGroup.tui-format_pathway-activityFooter a.tui-actionLink {
color: #fff !important;
background: var(--btn-prim-bg-color);
color: var(--btn-prim-text-color);
padding: 6px var(--spacing-large);
font-size: 1.4rem;
border-radius: var(--btn-button-border-radius);
text-align: center;
}
.format-pathway .tui-formBtnGroup.tui-format_pathway-activityFooter a.tui-actionLink:hover {
box-shadow: none;
color: var(--btn-prim-text-color-focus);
background-color: var(--btn-prim-bg-color-active);
}
/* --- .course-menu ul --- */
.course-menu ul {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
/* --- .summary .no-overflow h3 --- */
.summary .no-overflow h3 {
font-size: 20px !important;
color: #026976;
margin: 0;
}
/* --- body.course-1022 --- */
.course-1022 li.resource.modtype_resource {
margin-left: var(--spacing-xl) !important;
}
/* ============================================================
11. ITINERARIO ENFERMERÍA — body.course-1061
============================================================ */
body.course-1061 #region-top .content.block-content {
max-width: 1650px;
margin:auto;
border-radius:20px;
background-color:white;
padding:20px!important;
box-shadow:0 1px 3px 1px #ddd;
}
/*body.course-1061 #region-top .block .block-header{
display:none!important;
}*/
/* Checks desplazados */
body.course-1061 #module-18401 .activityinstance{
width:94%!important;
}
body.course-1061 #module-18419 .activityinstance{
width:94%!important;
}
body.course-1061 #region-top .content.block-content{
margin-top:-68px!important;
}
/* ============================================================
12. PROGRAMAS — .path-totara-program
============================================================ */
.path-totara-program .descprograma h4 {
color: var(--color-secondary-dark) !important;
text-transform: uppercase;
font-size: 1em;
}
.path-totara-program.context-32745 .descprograma h4 {
color: #fbeeea !important;
}
.path-totara-program .programprogress .startdate,
.path-totara-program .programprogress .item {
color: #f0f5f6 !important;
}
.path-totara-program .programprogress .separador {
border-color: #f0f5f690 !important;
}
.path-totara-program .display-program h3 {
color: #3c6671;
}
#inst8272 .dropdown-toggle {
display: none;
}
/* ============================================================
13. FEEDBACK Y EVALUACIONES — .path-mod-feedback
============================================================ */
#page-mod-page-view .modified {
display: none;
}
#feedback h3[id^="yui_"],
#feedback h3:nth-of-type(2) {
display: none;
}
#feedback .quizgradefeedback p {
background-color: var(--color-background);
padding: 1em;
border-radius: var(--border-radius);
font-weight: 500;
}
.feedback_form.ianonymous.mform {
margin-top: 35px;
}
.feedback_form.ianonymous.mform .legend,
.feedback_form.ianonymous.mform .requirednote,
.fitem.femptylabel.feedback_mode {
display: none !important;
}
#feedback_dragarea .feedback_form.ianonymous.mform .legend, #feedback_dragarea .feedback_form.ianonymous.mform .requirednote,#feedback_dragarea .fitem.femptylabel.feedback_mode{
display: block !important;
}
.feedback_form.ianonymous.mform .fitem .fitemtitle {
width: 0% !important;
}
.feedback_form.ianonymous.mform .fitem > fieldset > legend {
width: 0%;
}
.path-mod-feedback div.feedback_itemlist {
border: none;
margin: 0;
padding-top: 0;
}
.feedback_form.ianonymous.mform .fitem_actionbuttons {
margin-top: 35px;
}
.feedback_form.ianonymous.mform .felement {
margin: 0 0 15px 0 !important;
}
.feedback_form.ianonymous.mform .felement.fstatic {
margin-bottom: 0 !important;
padding-bottom: 0;
}
.feedback_form.ianonymous.mform .fgroup .felement label {
margin: 2px 13px 0 0;
}
.mform .felement.fstatic .no-overflow {
color: #666666;
font-weight: 600;
}
/* Quiz / evaluaciones */
.que.multichoice.deferredfeedback .qtext {
font-weight: 500;
color: var(--navy-blue);
margin: 3px 0 0 -20px;
}
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
padding-left: 7px;
border-radius: 15px;
}
.que.multichoice .answer div.r0 input,
.que.multichoice .answer div.r1 input {
margin: 0 -7px 0 -38px;
}
.que.multichoice.deferredfeedback .state,
.que.multichoice.deferredfeedback .grade,
.que.multichoice.deferredfeedback .questionflag {
display: none;
}
.que.multichoice.deferredfeedback .no {
background-color: var(--teal);
border-radius: 16px;
text-align: center;
padding: 5px;
color: white;
}
/* Cuestionario condiciones */
li.option #choice_1{
margin-bottom: 40px!important;
}
/* ============================================================
14. PERFIL DE USUARIO — #page-user-profile
============================================================ */
#page-user-profile.tenant-user-ext #inst8291,
#page-user-profile.tenant-user-ext #inst12.block_totara_user_profile,
#page-user-profile.tenant-user-ext #inst10.block_totara_user_profile {
display: none !important;
}
/* Bloques inst9 e inst10 (block_totara_user_profile): fondo warm gray
(2026-09-03). OJO: inst10 se oculta arriba en tenant externo → allí solo
se ve en inst9. */
#page-user-profile #inst9 .content.block-content,
#page-user-profile #inst10 .content.block-content {
background-color: var(--warm-gray) !important;
}
/* Avatares SIN borde: ficha de perfil (.tw-profileCard__avatar__img) y avatar
del topbar (.totaraNav_prim--side .usermenu .userpicture). El borde lo ponía
el tema (var(--color-text) / --nav-tab-text-color); se anula (2026-09-03). */
.tw-profileCard__avatar__img,
.totaraNav_prim--side .usermenu .userpicture {
border: none !important;
}
/* ============================================================
15. CALIFICACIONES — #page-grade-report-overview-index
============================================================ */
@media (min-width: 768px) {
#page-grade-report-overview-index h3 {
color: var(--color-secondary-dark) !important;
}
#page-grade-report-overview-index table thead tr th {
background-color: var(--color-accent);
color: white;
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-weight: bold;
padding: var(--spacing-small) var(--spacing-medium);
}
#page-grade-report-overview-index #overview-grade thead tr th.c0 {
border-top-right-radius: 0;
}
#page-grade-report-overview-index #overview-grade thead tr th.c1 {
border-top-left-radius: 0;
}
#page-grade-report-overview-index h3::before {
content: "";
display: inline-block;
width: 50px;
height: 30px;
background-image: url('https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/icon-profes_dark-blue.svg');
background-size: contain;
background-repeat: no-repeat;
margin: 0 5px 0 var(--spacing-small);
vertical-align: middle;
}
#page-grade-report-overview-index .no-overflow,
#page-grade-report-overview-index div h3:first-of-type {
display: none;
}
}
/* ============================================================
16. CALENDARIO — .path-calendar
============================================================ */
@media (min-width: 768px) {
.maincalendar .event {
background-color: #f0f4f560 !important;
border-color: #f0f4f5 !important;
}
.maincalendar .event .course {
margin: var(--spacing-small) 0;
font-weight: 500;
font-size: 1.1em;
}
.maincalendar .event .course .description.card-block .no-overflow {
padding: var(--spacing-medium) !important;
border-radius: var(--border-radius) !important;
}
.path-calendar .maincalendar .calendar-controls .current::first-letter {
text-transform: uppercase;
}
.path-calendar .maincalendar .calendar-controls .current {
font-size: 20px;
}
.maincalendar .eventlist h3.name {
padding: 0px var(--spacing-medium);
text-transform: capitalize;
}
.description.card-block.calendar_event_global {
border-radius: var(--border-radius);
}
.description.card-block.calendar_event_global p {
padding: var(--spacing-small);
}
.maincalendar .header .form-inline,
.maincalendar .calendar-mod-filters #module_filter_facetoface {
display: none;
}
.minicalendarblock .minicalendar.calendartable h3 a,
.block_calendar_month .minicalendar.calendartable.days-in-week-7 .calendar-controls .current a {
text-transform: capitalize !important;
}
}
/* ============================================================
17. BASE DE DATOS — #page-mod-data-*
============================================================ */
#page-mod-data-edit.tenant-user tr.onlyadmin,
#page-mod-data-view.tenant-user .alert.alert-danger.alert-with-icon.fade.in {
display: none;
}
/* --- Database Certificados ACTUA --- */
.ividb_cert {
width: 100%;
background-color: #f0f0f0;
border: 1px solid #F0F0F0;
padding: var(--spacing-large);
border-radius: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.ividb_right {
width: 20%;
}
.ividb_left {
width: 80%;
}
p.ividb_text {
margin: 0px;
}
span.ividb_bold {
font-weight: 600;
color: #000;
}
span.ividb_name {
font-weight: 600;
color: var(--light-blue);
}
p.ividb_certificatelink {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
.ividb_certificatelink span.flex-icon.ft-fw.ft.file_pdf.actua-icon {
display: none;
}
.ividb_certificatelink a {
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/download-pdf.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
font-size: 0px;
max-width: 100px;
}
.ividb_actionbtn [class*=" tfont-var-"] {
font-size: 20px;
}
.tenant-user .ividb_adminvisible,
.tenant-user .tabtree .nav-tabs li:has(a[href*="mode=asearch"]),
.tenant-user .datapreferences #pref_sortby,
.tenant-user .datapreferences #advancedcheckbox,
.tenant-user .datapreferences label.mr-3 {
display: none !important;
}
.datapreferences {
margin-bottom: var(--spacing-large);
}
/* --- Database entry --- */
.ividb-entry tr td.lastcol input,
.ividb-entry tr td.lastcol .custom-select {
width: 95% !important;
max-width: 95% !important;
}
.ividb-entry tr.ividb_adminvisible td.lastcol {
text-align: right;
}
.ividb-entry tr td.c0 {
font-weight: 500;
text-align: left;
}
.ividb-entry tr td.c0 em {
font-weight: 400;
opacity: 0.8;
}
.ividb-entry tr td.lastcol fieldset legend,
.ividb-entry tr td.lastcol fieldset .inline-req {
display: none;
}
.fdescription.required {
margin-bottom: var(--spacing-large);
}
.ividb-entry .inline-req .form-required.flex-icon,
.ividb-entry .inline-req .form-required.flex-icon::before {
color: var(--red, #B4084A) !important;
}
/* --- Database Certificados IVIRMA --- */
#intro .info-certificados {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-small);
justify-content: space-between;
}
#intro .info-certificados div {
min-width: 180px;
background: var(--color-background) !important;
padding: var(--spacing-medium);
border-radius: var(--border-radius);
display: flex;
align-items: flex-start;
text-align: left;
width: 100%;
}
#intro .info-certificados div.attending {
flex: 0 1 40%;
}
#intro .info-certificados div.delivery {
flex: 0 1 58.5%;
}
#intro .info-certificados .text-box {
flex-direction: column !important;
padding: 0 !important;
}
#intro .info-certificados .atto_image_button_text-bottom {
width: 50px !important;
margin: 0 0 0.5em 0.5em !important;
}
#intro .info-certificados i {
opacity: 0.8;
margin: 12px 0 16px -10px;
font-weight: 500;
}
#intro .info-certificados span.title {
font-weight: bold !important;
color: var(--color-primary) !important;
text-transform: uppercase;
}
#intro .info-certificados p {
padding: 0 !important;
}
#intro .info-certificados div.delivery p.nurse {
font-weight: 400 !important;
}
#intro .info-certificados div.delivery p.nurse b {
font-weight: 500 !important;
}
/* ============================================================
18. MENSAJERÍA
============================================================ */
.messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
padding: 0 33px;
line-height: 2;
}
.messaging-area-container .messaging-area .messages-area .messages-header .name-container .status {
margin: 5px 0;
}
.btn.btn-link.messages-delete {
margin: 0.5em 0 -0.5em 0;
align-content: center;
}
.messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea {
border-radius: var(--border-radius-medium);
width: 98%;
}
.messaging-area-container .messaging-area .messages-area .response {
height: 62px;
}
.messaging-area-container .messaging-area .contacts-area .tabs {
height: 62px;
}
.messaging-area-container .messaging-area .contacts-area .searchtextarea input {
border-radius: 5px;
}
.messaging-area-container .messaging-area .messages-area.editing .messages-header .actions {
align-items: center;
}
.messaging-area-container .messaging-area .messages-area.editing .messages-header .btn-container.delete-all {
margin-bottom: 3px;
}
.messaging-area-container .messaging-area .messages-area .response .delete-confirmation .btn.btn-link.confirm {
border-radius: var(--border-radius-large);
align-items: center;
}
/* ============================================================
19. INFORMES LFE
============================================================ */
/* --- #inst214 cursos finalizados --- */
#inst214 thead,
#inst214 .footer,
#inst214 td.course_completion_iscomplete {
display: none;
}
#inst214 tbody {
display: flex;
flex-direction: row;
}
div#region-main #inst214.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst214 tr {
width: calc(50% - 10px);
border-top: 0;
background: transparent;
}
#inst214 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst214 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
border-radius: var(--border-radius) !important;
filter: drop-shadow(0px 4px 4px rgba(0.5, 0.5, 0.5, 0.06));
}
#inst214 td a:hover {
filter: drop-shadow(0px 4px 4px rgba(0.8, 0.8, 0.8, 0.1));
}
#inst214 td a img.course_icon {
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* --- Informes monthlys y must read papers --- */
.category-35 #inst8086 thead,
.category-35 #inst8086 .footer,
.category-35 .block_totara_report_table thead,
.category-35 .block_totara_report_table .footer,
#inst8428.block_totara_report_table thead,
#inst8428.block_totara_report_table .footer {
display: none !important;
}
#inst8174 thead tr th,
#inst8190 thead tr th {
background-color: var(--color-primary) !important;
color: white;
}
#inst8428 thead tr th {
background-color: #e79181 !important;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
#inst8174 thead tr th a,
#inst8190 thead tr th a,
#inst8428 thead tr th a {
color: white !important;
padding: 0px var(--spacing-small);
}
#inst8174 thead tr th:first-child,
#inst8190 thead tr th:first-child {
border-top-left-radius: var(--border-radius);
}
#inst8174 thead tr th.course_completion_grade,
#inst8190 thead tr th.course_completion_grade {
border-top-right-radius: var(--border-radius);
text-align: center;
}
#inst8174 td.course_completion_grade,
#inst8190 td.course_completion_grade {
text-align: center;
}
.path-course.category-35 table#report_finalizacion_del_curso12 thead,
.path-course table#report_finalizacion_del_curso121 thead,
.path-course table#report_finalizacion_del_curso121 .footer a,
#inst8174 .footer a,
#inst8190 .footer a {
display: none;
}
.path-course.category-35 #block-region-side-post .block_totara_report_table .content .footer a,
.path-course.category-35 .totara-toolbar.totara-toolbar-top.clearfix,
.path-course.category-54 #block-region-side-post .block_totara_report_table .content .footer a,
.path-course.category-36 #block-region-side-post .block_totara_report_table .content .footer a,
#inst8428.block_totara_report_table .footer,
.path-course.category-36 .totara-toolbar.totara-toolbar-top.clearfix {
display: none;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td,
.path-course.category-54 table#report_finalizacion_del_curso121 td,
.category-54 #inst136 td,
#inst8174 td,
#inst8190 td {
background-color: #fff;
padding: 1em;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td a,
.path-course table#report_finalizacion_del_curso121 td a,
.category-54 #inst136 td a img.course_icon,
#inst8174 td a,
#inst8190 td a,
#inst8428.block_totara_report_table td a {
display: flex;
}
.path-course.category-35 table#report_finalizacion_del_curso12 td a img,
#inst8174 td a img,
.path-course table#report_finalizacion_del_curso121 td a img,
#inst8428.block_totara_report_table td a img {
margin-right: var(--spacing-small);
}
.path-course.category-35 .totara-table-container .toolbar-right-table {
float: none;
margin: auto;
text-align: center;
}
/* --- Informe mi equipo --- */
#my-teammembers-content ul > li:nth-child(4),
#my-teammembers-content ul > li:nth-child(6),
#my-teammembers-content ul > li:nth-child(7) {
display: none;
}
/* ============================================================
20. BLOQUES PNTs
============================================================ */
/* La antigua tarjeta .pnts-card (foto + VAGRoundedStd) se retiró el
2026-07-13: el bloque usa ahora .ivi-pnts__card (sección 28.2).
La clase pnts-card__title pervive en el HTML solo como gancho del
bloque "JS: Recuento PNTs restantes". */
/* #inst10236 = bloque PNT del tenant IMR (imrcampus.com) — estilos propios en imr/css-tenant-imr.css */
#inst291 thead,
#inst797 thead,
#inst215 thead,
#inst10236 thead,
#inst230 thead {
display: none;
}
#inst291 .footer,
#inst797 .footer,
#inst215 .footer,
#inst10236 .footer,
#inst230 .footer {
display: none;
}
#inst291 tbody,
#inst797 tbody,
#inst215 tbody,
#inst10236 tbody,
#inst230 tbody {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#region-main #inst291.block .content,
div#region-main #inst797.block .content,
div#region-main #inst215.block .content,
div#region-main #inst10236.block .content,
div#region-main #inst230.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst291 tr,
#inst797 tr,
#inst215 tr,
#inst10236 tr,
#inst230 tr {
width: calc(50% - 10px);
border-top: 0;
background: transparent;
}
#inst291 td,
#inst797 td,
#inst215 td,
#inst10236 td,
#inst230 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst291 td a,
#inst797 td a,
#inst215 td a,
#inst10236 td a,
#inst230 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
border-radius: var(--border-radius) !important;
filter: drop-shadow(0px 4px 4px rgba(0.5, 0.5, 0.5, 0.06));
}
#inst291 td a:hover,
#inst797 td a:hover,
#inst215 td a:hover,
#inst10236 td a:hover,
#inst230 td a:hover {
filter: drop-shadow(0px 4px 4px rgba(0.8, 0.8, 0.8, 0.1));
}
#inst291 td a img.course_icon,
#inst797 td a img.course_icon,
#inst215 td a img.course_icon,
#inst230 td a img.course_icon {
background: var(--color-primary-light);
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* --- #inst10405 bloques PNTs completados --- */
#inst10405 .totara-table-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
}
#inst10405 thead {
display: none;
}
#inst10405 .footer {
display: none;
}
#inst10405 tbody {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#region-main #inst10405.block .content {
border-radius: 0px;
border: none;
box-shadow: none;
background: transparent !important;
}
#inst10405 tr {
width: calc(31%);
border-top: 0;
background: transparent;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
padding: 10px;
border-radius: 15px;
margin: 5px;
}
#inst10405 td {
display: flex;
border-top: 0;
background: transparent;
width: 100%;
flex-direction: row;
align-items: center;
}
#inst10405 td a {
width: 100% !important;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
gap: var(--spacing-large);
font-weight: 700;
}
#inst10405 td a img.course_icon {
background: var(--color-primary-light);
padding: 14px;
max-width: 65px !important;
max-height: 65px !important;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
/* Icono ordenar */
#inst10405 th .iconsort {
color: #0F6C72 !important;
}
#inst10405 table.totaratable tbody tr {
background: #ffffff !important;
margin-bottom: 10px;
}
#inst10405 table.totaratable tbody tr {
background: #ffffff !important;
margin: 10px;
}
#inst10405 table.totaratable tbody tr td {
padding: 12px 16px;
}
#inst10405 table.totaratable td {
padding: 10px 10px 2px 10px !important;
border: none !important;
font-size: 15px !important;
}
#inst10405 table.totaratable a {
color: #0F6C72 !important;
font-weight: 600;
text-decoration: none;
}
#inst10405 .progressbar_container .bar {
border-radius: 20px !important;
}
#inst10405 .bar[aria-valuenow="0"] {
background: #D2D2D2 !important;
}
#inst10405 .bar[aria-valuenow="50"] {
background: #FF9F37 !important;
}
#inst10405 .progressbar__text {
color: #444 !important;
font-size: 14px !important;
margin-left: 6px;
}
#inst10405 .footer,
#inst10405 .footer a {
display: none !important;
}
#inst10405 table.totaratable td.course_courselink a {
position: relative;
padding-left: 26px !important;
display: inline-flex;
align-items: center;
}
#inst10405 table.totaratable td.course_courselink a::before {
font-family: "FontAwesome";
content: "\f0f6";
font-size: 20px;
color: #F58C7C;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.95;
}
#inst10405 table.totaratable td.base_timecompleted::before {
font-family: "Font Awesome 6 Free";
font-weight: 400;
content: "\f058";
padding-right: 10px;
font-size: 18px;
color: #4fcb3e;
position: relative;
left: 0;
top: 40%;
opacity: 0.95;
}
#inst10405 table.totaratable td.course_courselink a:hover::before {
opacity: 1;
}
/* --- #inst10507 --- */
#inst10507 .content.block-content {
padding: 0 !important;
}
/* ============================================================
21. CERTIFICADOS Y BADGES
============================================================ */
.block_badges ul.badges img {
width: 110px;
height: 110px;
}
/* --- Home externos: "Mis últimas insignias" (#inst355) ---
El script home-externos--js-ultimas-insignias.html añade la clase
.ivi-badges-enhanced y las clases del sistema IVI al enlace nativo. */
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .content.block-content {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: var(--warm-gray, #FAF4EE) !important;
border: 1px solid var(--border-soft, #E4E2EE) !important;
border-radius: 14px !important;
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
padding: 28px 32px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 28px 20px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Hasta seis badges por fila, siempre alineados desde la izquierda. */
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
float: none !important;
display: flex !important;
flex: 0 1 calc((100% - 100px) / 6) !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 145px !important;
max-width: 220px !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges img {
display: block !important;
width: 145px !important;
height: 145px !important;
max-width: 100% !important;
margin: 0 auto 14px !important;
object-fit: contain !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges a {
color: var(--navy-blue, #08004F) !important;
line-height: 1.4 !important;
text-align: center !important;
text-decoration: none !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges a:hover {
color: var(--light-blue, #004DF0) !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .ivi-badges-seeall-wrap {
position: static !important;
width: 100% !important;
margin-top: 28px !important;
text-align: center !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced a.ivi-badges-seeall {
margin: 0 !important;
border-radius: var(--btn-radius-pill, 999px) !important;
}
@media (max-width: 1199px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 60px) / 4) !important;
}
}
@media (max-width: 991px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 40px) / 3) !important;
}
}
@media (max-width: 767px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced .content.block-content {
padding: 22px 18px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: calc((100% - 20px) / 2) !important;
min-width: 130px !important;
}
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges img {
width: 130px !important;
height: 130px !important;
}
}
@media (max-width: 420px) {
#page-totara-dashboard-6 .block_badges.ivi-badges-enhanced ul.badges > li {
flex-basis: 100% !important;
}
}
.ividb_uservisible_1 {
margin-right: var(--spacing-large);
}
.ividb_left_1 {
display: flex;
}
.ividb_text_1 {
margin-bottom: 7px !important;
color: #000;
}
.ividb_bold_1 {
color: #000;
}
.listado ul li::marker {
color: var(--color-secondary-dark) !important;
}
.listado {
border-left: 2px solid #52b4bb40;
margin-bottom: var(--spacing-medium);
}
.listado ul li {
line-height: 1.8em !important;
font-weight: 500;
color: var(--color-secondary-dark);
}
.no_incluido {
background: #fafafa !important;
padding: var(--spacing-small) var(--spacing-large);
border-radius: var(--border-radius);
margin: var(--spacing-small) 0 !important;
line-height: 1.8em !important;
}
.no_incluido h4 {
color: #F58C7C;
font-size: 18px;
}
.tesis {
display: flex;
align-items: flex-start;
background: var(--color-background) !important;
padding: var(--spacing-medium) var(--spacing-medium) 5px var(--spacing-small);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-large);
}
.tesis img {
margin-right: var(--spacing-medium);
}
/* ============================================================
22. EXPEDIENTE
============================================================ */
#dp-plan-content ul.nav-tabs li.active a {
color: white;
border-radius: 8px;
margin-bottom: 5px;
}
.tabtree ul.nav.nav-tabs {
padding-bottom: 5px;
}
/* ============================================================
23. FAQ ACORDEÓN
============================================================ */
.accordion.actuasolutions .linkheader,
.accordion.actuasolutions .linksubheader {
width: 100%;
border-bottom: 1px solid var(--color-gray-border);
padding: var(--spacing-small) 0;
display: block;
color: var(--light-blue);
cursor: pointer;
font-weight: 700;
}
.accordion.actuasolutions .linkheader {
font-size: 1.6rem;
}
.accordion.actuasolutions .linksubheader {
font-size: 1.45rem;
margin-left: var(--spacing-small);
}
.accordion.actuasolutions .linkheader:not(.collapsed) {
color: var(--color-text-gray);
}
.accordion.actuasolutions .linkheader:after,
.accordion.actuasolutions .linkheader:not(.collapsed):after {
content: "";
float: right;
margin-right: var(--spacing-small);
font-family: fontawesome;
}
.accordion.actuasolutions .linkheader:after {
color: #12B4A2;
}
.accordion.actuasolutions .linkheader:not(.collapsed):after {
color: var(--color-header-highlight);
}
.accordion.actuasolutions .accordioncontent {
margin: var(--spacing-small) 0 0 var(--spacing-small);
padding: var(--spacing-small) 0 var(--spacing-xl) 0;
border-bottom: 1px solid var(--color-gray-border);
}
/* ============================================================
24. MODAL VIMEO
============================================================ */
#vimeo-custom-modal.vimeo-modal-container {
display: none;
position: fixed;
z-index: 10000 !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
overflow: hidden;
}
#vimeo-custom-modal.vimeo-modal-container.show,
#vimeo-custom-modal[style*="display: flex"] {
display: flex !important;
}
.vimeo-modal-content {
position: relative;
background-color: transparent;
width: 90vw;
max-width: 1200px;
height: auto;
max-height: 90vh;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
}
.vimeo-modal-close-btn {
color: var(--color-white);
position: absolute;
top: -50px;
right: 0;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
user-select: none;
}
.vimeo-modal-close-btn:hover,
.vimeo-modal-close-btn:focus {
color: #ccc;
transform: scale(1.1);
}
.vimeo-iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-color: #000;
border-radius: 8px;
overflow: hidden;
}
.vimeo-iframe-container iframe.vimeo-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.vimeo-modal-content {
width: 95vw;
max-height: 80vh;
}
.vimeo-modal-close-btn {
top: -40px;
font-size: 30px;
right: 5px;
}
}
@media (max-width: 480px) {
.vimeo-modal-content {
width: 98vw;
}
.vimeo-modal-close-btn {
top: -35px;
font-size: 28px;
}
}
/* ============================================================
25. CIBERSEGURIDAD — inst11277
============================================================ */
/* --- Header del bloque Totara (instance-11277-header) --- */
#inst11277 .block-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 1.25rem !important;
}
#instance-11277-header,
#inst11277 .block-title h2 {
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-size: 30px !important;
font-weight: 700 !important;
color: #17417B !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.01em !important;
background: transparent !important;
border: none !important;
}
#inst11277,
#inst11277 > .content,
#inst11277 .block-content,
#inst11277 .no-overflow {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
/* --- Contenedor raíz --- */
.cyber-standalone {
padding: 0;
width: 100%;
}
.cyber-standalone__title {
display: none;
}
/* --- Grid 3 columnas --- */
.cyber-standalone__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
align-items: stretch;
}
@media (max-width: 900px) {
.cyber-standalone__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cyber-standalone__grid { grid-template-columns: 1fr; }
}
.cyber-standalone__grid > li {
display: flex;
flex-direction: column;
}
/* --- Card --- */
.cyber-card {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
border-radius: 25px;
border: 0.5px solid rgba(0,0,0,0.07);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cyber-card:hover {
border-color: #17417B;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(23,65,123,0.12), 0 2px 4px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
}
.cyber-card.is-disabled {
cursor: default;
pointer-events: none;
}
.cyber-card.is-disabled:hover {
border-color: rgba(0,0,0,0.07);
transform: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
}
.cyber-card.is-disabled .cyber-card__bg {
filter: blur(2px) grayscale(30%) brightness(0.9);
opacity: 0.7;
}
.cyber-card.is-disabled .cyber-card__overlay {
opacity: var(--disabled-overlay-opacity, 0.4);
}
.cyber-card.is-disabled .cyber-card__soon {
opacity: var(--disabled-badge-opacity, 0.8);
background: var(--disabled-badge-bg, var(--color-primary));
}
.cyber-card.is-disabled .cyber-card__body,
.cyber-card.is-disabled .cyber-card__footer {
opacity: var(--disabled-text-opacity, 0.25);
}
/* --- Imagen de cabecera --- */
.cyber-card__image {
position: relative;
height: 140px;
overflow: hidden;
background: #ffffff;
flex-shrink: 0;
}
.cyber-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,83,0.1) 0%, rgba(14,43,83,0.65) 100%);
z-index: 1;
}
.cyber-card__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(2px);
transform: scale(1.05);
}
/* --- Badge Próximamente --- */
.cyber-card__soon {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
background: var(--color-primary-light);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 5px 11px 5px 9px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 6px;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cyber-card__soon .fa {
font-size: 10px;
color: #fff;
flex-shrink: 0;
}
/* --- Overlay título sobre imagen --- */
.cyber-card__overlay {
position: absolute;
bottom: 14px;
left: 16px;
right: 16px;
z-index: 2;
pointer-events: none;
}
.cyber-card__overlay-title {
display: block;
color: #fff;
font-size: 19px;
font-weight: 700;
line-height: 1.25;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
margin: 0;
padding-right: 3em;
}
.cyber-card__overlay-sub {
display: block;
color: rgba(255,255,255,0.88);
font-size: 12px;
margin-top: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* --- Cuerpo --- */
.cyber-card__body {
padding: 16px 18px 10px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
background: #ffffff;
}
.cyber-card__bloque {
font-size: 20px;
font-weight: 700;
color: #223C84;
letter-spacing: 0.4px;
margin: 0;
}
.cyber-card__desc {
font-size: 15px;
color: #5C5F66;
line-height: 1.5;
margin: 4px 0 0;
}
/* --- Pie --- */
.cyber-card__footer {
padding: 10px 18px 14px;
background: #ffffff;
display: flex;
align-items: center;
gap: 8px;
}
.cyber-card__readmore {
display: inline-block;
background: #223C84;
color: #fff;
font-size: 11px;
font-weight: 600;
font-style: normal;
padding: 4px 10px;
border-radius: 999px;
margin: 0;
text-align: left;
flex-shrink: 0;
}
.cyber-card__due {
display: inline-block;
background: #EFEFF0;
color: #5C5F66;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
flex-shrink: 0;
}
/* --- Modal --- */
.ivirma-cyber-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
align-items: center;
justify-content: center;
}
.ivirma-cyber-modal.is-open { display: flex; }
.ivirma-cyber-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(14,43,83,0.55);
}
.ivirma-cyber-modal__dialog {
position: relative;
background: #fff;
border-radius: 18px;
width: 900px;
max-width: 95%;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ivirma-cyber-modal__hero {
position: relative;
min-height: 100px;
background: linear-gradient(135deg, #0E2B53 0%, #17417B 100%);
background-size: cover;
background-position: center;
padding: 35px;
color: #fff;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.ivirma-cyber-modal__hero.has-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,83,0.25) 0%, rgba(14,43,83,0.8) 100%);
}
.ivirma-cyber-modal__hero > * { position: relative; z-index: 1; }
.ivirma-cyber-modal__hero-text {
flex: 1;
min-width: 0;
text-align: left;
}
.ivirma-cyber-modal__close {
position: absolute;
padding:20px;
top: 10px;
right: 12px;
left: auto;
background: rgba(255,255,255,0);
border: none;
color: #fff;
font-size: 22px;
width: 28px; height: 28px;
border-radius: 50%;
cursor: pointer;
z-index: 100;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
float: none;
}
.ivirma-cyber-modal__close:hover { background: rgba(255,255,255,0.3); }
.ivirma-cyber-modal__title {
font-size: 22px;
font-weight: 500;
margin: 0 0 3px;
color: #fff;
line-height: 1.2;
text-align: left;
padding-right: 0;
text-shadow: 2px 2px 10px #000000b8;
}
.ivirma-cyber-modal__subtitle {
padding-top: 20px;
font-size: 14px;
font-weight: 500;
opacity: .85;
margin: 0 0 6px;
display: block;
}
.ivirma-cyber-modal__bloque {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
opacity: .8;
display: block;
}
.ivirma-cyber-modal__duration {
display: flex;
align-items: center;
gap: 8px;
background: rgb(3 26 51);
padding: 8px 12px;
border-radius: 8px;
flex-shrink: 0;
align-self: flex-end;
}
.ivirma-cyber-modal__duration svg { width: 30px; height: 30px; flex-shrink: 0; }
.ivirma-cyber-modal__duration-label {
font-size: 10px;
opacity: .8;
text-transform: uppercase;
letter-spacing: .5px;
display: block;
}
.ivirma-cyber-modal__duration-value {
font-size: 14px;
font-weight: 600;
display: block;
}
.ivirma-cyber-modal__body {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 26px;
padding: 20px 20px 0;
overflow-y: auto;
flex: 1;
padding: 45px;
}
.ivirma-cyber-modal__body h3 {
font-size: 18px;
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: #17417B;
margin: 0 0 6px;
}
.ivirma-cyber-modal__body p {
font-size: 15px;
color: #5C5F66;
line-height: 1.55;
margin: 0 0 16px;
}
.ivirma-cyber-modal__fechas { white-space: pre-line; }
.ivirma-cyber-modal__contenidos { display: flex; flex-direction: column; gap: 15px; }
.ivirma-cyber-modal__pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 15px;
border-radius: 999px;
border: none;
background: #223C84 !important;
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: 500;
transition: background 0.15s ease;
}
.ivirma-cyber-modal__pill:hover { background: #1a2f6a; text-decoration: none; color: #fff; }
.ivirma-cyber-modal__pill-text { flex: 1; min-width: 0; }
.ivirma-cyber-modal__pill-min {
display: inline-block;
flex-shrink: 0;
margin-left: 8px;
padding: 2px 8px;
background: rgb(3, 26, 51);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.ivirma-cyber-modal__pill-arrow { color: #fff; font-size: 11px; flex-shrink: 0; }
.ivirma-cyber-modal__col-right {
align-self: end;
}
.ivirma-cyber-modal__col-left h3{
padding-bottom: 10px;
}
.ivirma-cyber-modal__footer {
padding: 20px 35px;
border-top: 1px solid rgba(0,0,0,0.07);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #012246;
margin-top: 16px;
}
.ivirma-cyber-modal__footer-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0 0 2px;
display: block;
}
.ivirma-cyber-modal__footer-sub {
font-size: 11px;
color: #fff;
margin: 0;
display: block;
}
.ivirma-cyber-modal__cta {
display: inline-block;
background: #fff;
color: #012246;
font-size: 16px;
font-weight: 600;
padding: 8px 18px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s ease;
}
.ivirma-cyber-modal__cta:hover { background: #1a2f6a; text-decoration: none; color: #fff; }
@media (max-width: 600px) {
.ivirma-cyber-modal__body { grid-template-columns: 1fr; }
.ivirma-cyber-modal__footer { flex-direction: column; align-items: flex-start; }
}
body.ivirma-cyber-modal-open { overflow: hidden; }
/* --- Animaciones keyframes --- */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes backdropFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ivirma-cyber-modal.is-open .ivirma-cyber-modal__dialog {
animation: modalFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ivirma-cyber-modal.is-open .ivirma-cyber-modal__backdrop {
animation: backdropFadeIn 0.5s ease both;
}
@keyframes modalFadeOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
}
@keyframes backdropFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.ivirma-cyber-modal.is-closing .ivirma-cyber-modal__dialog {
animation: modalFadeOut 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ivirma-cyber-modal.is-closing .ivirma-cyber-modal__backdrop {
animation: backdropFadeOut 0.5s ease both;
}
/* --- .cyber-card__desc--clamp --- */
.cyber-card__desc--clamp {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden !important;
text-overflow: ellipsis;
flex: none !important;
max-height: calc(1.5em * 4);
}
/* --- #dai-grid-cyber, #dai-grid-cyber-aud --- */
#dai-grid-cyber,
#dai-grid-cyber-aud {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
align-items: stretch;
}
#dai-grid-cyber.cols-2,
#dai-grid-cyber-aud.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
#dai-grid-cyber.cols-2,
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-2,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
#dai-grid-cyber.cols-2,
#dai-grid-cyber.cols-3,
#dai-grid-cyber-aud.cols-2,
#dai-grid-cyber-aud.cols-3 {
grid-template-columns: 1fr;
}
}
#dai-grid-cyber > li,
#dai-grid-cyber-aud > li {
display: flex;
flex-direction: column;
}
#dai-grid-cyber.cols-2 .cyber-card__image,
#dai-grid-cyber-aud.cols-2 .cyber-card__image {
height: 160px;
}
#dai-grid-cyber.cols-2 .cyber-card__overlay-title,
#dai-grid-cyber-aud.cols-2 .cyber-card__overlay-title {
font-size: 21px;
}
#dai-grid-cyber .cyber-card__desc,
#dai-grid-cyber-aud .cyber-card__desc {
-webkit-line-clamp: unset;
line-clamp: unset;
}
#dai-grid-cyber .cyber-card__bg:not([style]),
#dai-grid-cyber-aud .cyber-card__bg:not([style]) {
background: linear-gradient(135deg, #0E2B53 0%, #1F5499 60%, #2A6BB8 100%);
filter: none;
transform: none;
}
#dai-grid-cyber .cyber-card__bg[style],
#dai-grid-cyber-aud .cyber-card__bg[style] {
filter: blur(2px);
transform: scale(1.05);
}
#dai-grid-cyber > li,
#dai-grid-cyber-aud > li {
display: flex;
}
#dai-grid-cyber .cyber-card,
#dai-grid-cyber-aud .cyber-card {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
#dai-grid-cyber .cyber-card__body,
#dai-grid-cyber-aud .cyber-card__body {
flex: 1;
display: flex;
flex-direction: column;
}
#dai-grid-cyber .cyber-card__footer,
#dai-grid-cyber-aud .cyber-card__footer {
margin-top: auto;
}
.cyber-card.is-disabled {
cursor: default;
}
/* ============================================================
26. DATA & AI — inst11275
============================================================ */
/* --- Variables DAI --- */
:root {
--dai-primary: #17417B;
--dai-primary-hover: #1F5499;
--dai-primary-light: #E8EEF7;
--dai-primary-dark: #0E2B53;
--dai-text-secondary: #5C5F66;
--dai-text-tertiary: #8A8D94;
--dai-border: rgba(0, 0, 0, 0.08);
--dai-radius-md: 10px;
--dai-radius-lg: 20px;
}
/* --- Header del bloque Totara (inst11275 + inst11341) --- */
#inst11275 .block-header,
#inst11341 .block-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 1.25rem !important;
}
#instance-11275-header,
#instance-11341-header,
#inst11275 .block-title h2,
#inst11341 .block-title h2 {
font-family: 'IVI Glance', 'Noto Sans', sans-serif;
font-size: 30px !important;
font-weight: 700 !important;
color: #17417B !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.01em !important;
background: transparent !important;
border: none !important;
}
#inst11275 .content.block-content,
#inst11341 .content.block-content {
padding: 0px;
padding-bottom: 50px !important;
}
#region-main .block .content:has(.dai-wrap),
#region-main .block:has(.dai-wrap) > .content,
#region-main .block:has(.dai-wrap),
#region-main .block:has(#ms-grid),
#region-main .block:has(#ms-grid) > .content,
#inst8174,
#inst8174 > .content,
#inst8174 .content.block-content {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.dai-section-title {
font-size: 22px;
font-weight: 500;
color: var(--dai-primary);
margin: 0 0 1.25rem;
letter-spacing: -0.01em;
}
/* --- Selectores (tabs) --- */
.dai-filters {
display: flex;
gap: 10px;
margin-bottom: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1.25rem;
}
.dai-filter-btn {
position: relative;
padding: 9px 22px;
border-radius: 999px;
border: 3px solid var(--dai-primary);
background: transparent;
color: var(--dai-primary);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
cursor: pointer;
outline: none;
transition:
background-color 0.18s ease,
color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.12s ease;
}
.dai-filter-btn:hover:not(.active) {
background: var(--dai-primary-light);
color: var(--dai-primary-dark);
border-color: var(--dai-primary);
border: 3px solid var(--dai-primary);
}
.dai-filter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(23, 65, 123, 0.25);
}
.dai-filter-btn:active:not(.active) {
transform: scale(0.97);
border: 3px solid;
}
.dai-filter-btn.active {
background: linear-gradient(135deg, var(--dai-primary) 0%, var(--dai-primary-dark) 100%);
color: #fff;
border: 3px solid var(--dai-primary-dark);;
}
.dai-filter-btn.active:hover {
background: linear-gradient(135deg, var(--dai-primary-hover) 0%, var(--dai-primary) 100%);
border: 3px solid var(--dai-primary);
}
/* --- Grid de cards --- */
.dai-grid {
display: grid;
gap: 14px;
}
.dai-grid.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dai-grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dai-grid.cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
.dai-grid.cols-2,
.dai-grid.cols-3,
.dai-grid.cols-4 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}
.dai-card {
background: #fff;
border-radius: var(--dai-radius-lg);
border: 0.5px solid var(--dai-border);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
min-height: 240px;
transition:
border-color 0.18s ease,
transform 0.18s ease;
}
.dai-card:hover {
border-color: var(--dai-primary);
transform: translateY(-2px);
}
.dai-card-img {
height: 110px;
position: relative;
display: flex;
align-items: flex-end;
padding: 12px 14px;
}
.dai-card-img.b1 {
background: linear-gradient(135deg, var(--dai-primary-dark) 0%, var(--dai-primary) 100%);
}
.dai-card-img.b2 {
background: linear-gradient(135deg, var(--dai-primary) 0%, var(--dai-primary-hover) 100%);
}
.dai-card-img.b3 {
background: linear-gradient(135deg, var(--dai-primary-hover) 0%, #2A6BB8 100%);
}
.dai-card-title-overlay {
color: #fff;
font-size: 14px;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
line-height: 1.3;
}
.dai-card-body {
padding: 12px 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.dai-card-type {
font-size: 10px;
font-weight: 500;
color: var(--dai-text-tertiary);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.dai-card-name {
font-size: 14px;
font-weight: 500;
color: var(--dai-primary);
margin: 0;
line-height: 1.3;
}
.dai-card-desc {
font-size: 12px;
color: var(--dai-text-secondary);
line-height: 1.45;
flex: 1;
margin: 4px 0 0;
}
.dai-card-meta {
font-size: 10px;
color: var(--dai-text-tertiary);
padding: 10px 14px 12px;
border-top: 0.5px solid var(--dai-border);
margin-top: 8px;
}
/* --- Tags --- */
.dai-pending-tag {
display: inline-block;
background: #FAEEDA;
color: #854F0B;
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
margin-top: 4px;
}
.dai-eu-tag {
display: inline-block;
background: var(--dai-primary-light);
color: var(--dai-primary-dark);
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
margin-top: 4px;
margin-right: 4px;
letter-spacing: 0.3px;
}
/* --- Accesibilidad --- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Fix sticky sidebar --- */
div:has(> #region-main) {
display: flex !important;
}
div:has(> #region-main) > #region-main,
div:has(> #region-main) > #block-region-side-post {
float: none !important;
}
#block-region-side-post {
overflow: visible !important;
}
#inst9796 {
position: sticky !important;
top: 0px;
}
#inst9796.cta-onetech .content.block-content {
position: relative !important;
overflow: hidden !important;
position: sticky;
}
#inst9796.cta-onetech .content.block-content::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image: url("https://ivirmacampus.com/pluginfile.php/1/local_uploadfiles/additionalimages/0/one-tech-sidebar-bg.png") !important;
background-position: center !important;
background-size: cover !important;
filter: blur(8px) !important;
transform: scale(1.05) !important;
z-index: 0 !important;
}
#inst9796.cta-onetech .content.block-content .no-overflow {
position: relative !important;
z-index: 1 !important;
min-height: 82vh !important;
justify-content: center !important;
align-items: center !important;
}
/* --- CTA Catalog & OneTech --- */
.cta-catalog .content.block-content .no-overflow,
.cta-onetech .content.block-content .no-overflow {
display: flex !important;
font-size: 16px !important;
padding: 1em !important;
}
.cta-catalog .content.block-content .no-overflow {
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-end !important;
}
.cta-onetech .content.block-content .no-overflow {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.cta-catalog .content.block-content h2.title,
.cta-onetech .content.block-content h2.title {
color: #fff !important;
margin: 0 0 12px !important;
}
.cta-catalog .content.block-content .btn-dcha a,
.cta-onetech .content.block-content .btn-dcha a {
display: inline-block !important;
border: 1px solid #fff !important;
padding: var(--spacing-small, 8px) 25px !important;
border-radius: 25px !important;
background-color: #fff !important;
color: #2d6874 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background-color 0.25s ease, color 0.25s ease !important;
}
.cta-catalog .content.block-content .btn-dcha a:hover,
.cta-onetech .content.block-content .btn-dcha a:hover {
background-color: rgba(255,255,255,0.12) !important;
color: #fff !important;
text-decoration: none !important;
}
.cta-onetech .onetech-btn {
display: inline-block;
background: #fff !important;
margin-top: 20px !important;
padding: 15px 30px !important;
border-radius: 32px !important;
color: #223C84 !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}
.cta-onetech .onetech-btn:hover {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
transform: scale(1.03) !important;
text-decoration: none !important;
}
/* --- Copilot DAI loader --- */
.dai-copilot-loader {
display: none;
align-items: center;
gap: 10px;
padding: 18px 22px;
color: #17417B;
font-size: 15px;
font-weight: 500;
}
.dai-copilot-loader__spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(23, 65, 123, 0.2);
border-top-color: #17417B;
border-radius: 50%;
animation: dai-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes dai-spin {
to { transform: rotate(360deg); }
}
/* --- Aviso sección sin cursos --- */
.dai-empty-notice {
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 18px 22px;
background: #F0F4FA;
border: 1px solid #D0DCEE;
border-radius: 12px;
color: #17417B;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.dai-empty-notice__icon {
font-size: 20px;
color: #17417B;
flex-shrink: 0;
opacity: 0.7;
}
/* ============================================================
26. CATÁLOGO DE CURSOS
Página: /totara/catalog/index.php
Selector raíz: #page-totara-catalog-index
NOTA: No se toca display/flex/grid de Totara, solo estilos visuales
============================================================ */
#page-totara-catalog-index .tw-catalog__aside {
padding-right: 0px !important;
}
#page-totara-catalog-index .tw-selectRegionPanel {
padding: 8px;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector > div {
margin-left: 0px !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_text {
padding-top: 4px !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary__selector:last-of-type {
align-content: center !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary .tw-catalogResultsCount {
display: flex;
align-items: center;
align-self: center;
margin: auto 26px auto auto;
font-size: 16px;
font-weight: 500;
padding-top: 0;
}
/* Badge del contador real. El JS conserva el contador nativo hasta haber
calculado al menos una cifra fiable; por eso solo se oculta con la clase
ivi-results-badge-ready. */
#page-totara-catalog-index .tw-catalogResultsCount.ivi-results-badge-ready .tw-catalogResultsCount__text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#page-totara-catalog-index .tw-selectRegionPrimary .tw-catalogResultsCount.ivi-results-badge-ready > div {
display: none;
}
#page-totara-catalog-index .ivi-results-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
box-sizing: border-box;
border-radius: 999px;
background: var(--bg-blue, #DCE6FF);
font-family: var(--font-body, "Noto Sans", sans-serif);
font-size: 13px;
line-height: 1;
color: var(--navy-blue, #08004F);
white-space: nowrap;
transform: translateY(-2px);
}
#page-totara-catalog-index .ivi-results-badge::before {
content: "school";
font-family: "Material Symbols Outlined";
font-size: 17px;
line-height: 1;
color: var(--light-blue, #004DF0);
font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
}
#page-totara-catalog-index .ivi-results-badge__n {
font-weight: 700;
color: var(--light-blue, #004DF0);
}
#page-totara-catalog-index .ivi-results-badge__l {
font-weight: 500;
}
#page-totara-catalog-index .tw-catalogItemNarrow__progress {
display: none !important;
}
/* ── Barra superior de filtro primario ───────────────────────── */
#page-totara-catalog-index .tw-selectRegionPrimary > section:first-of-type {
background: none !important;
box-shadow: none !important;
border: none !important;
}
/* ── Dropdown tipo (Filtro_bloque → "Sección a la que pertenece:") ── */
/* Label encima del selector, en columna */
#page-totara-catalog-index .tw-selectTree {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
#page-totara-catalog-index .tw-selectTree__label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-gray);
text-transform: none !important;
letter-spacing: normal;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 2px 15px !important;
}
#page-totara-catalog-index .tw-selectTree__current {
padding: 6px 14px;
background: var(--color-primary) !important;
color: #fff !important;
border-radius: var(--border-radius-xl) !important;
font-size: 13px;
font-weight: 600;
border: none !important;
transition: background 0.2s;
text-decoration: none !important;
}
#page-totara-catalog-index .tw-selectTree__current:hover {
background: var(--color-secondary-dark) !important;
}
#page-totara-catalog-index .tw-selectTree__expandable {
position: relative;
width: 230px !important;
flex-shrink: 0 !important;
}
#page-totara-catalog-index .tw-selectTree__current {
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
#page-totara-catalog-index .tw-selectTree__option {
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
border: none !important;
width: 100% !important;
min-width: unset !important;
left: 0 !important;
box-sizing: border-box !important;
}
#page-totara-catalog-index .tw-selectTree__list_row_link {
font-size: 12px !important;
line-height: 1.4;
}
#page-totara-catalog-index .tw-selectTree__list_row:hover,
#page-totara-catalog-index .tw-selectTree__list_row.tw-selectTree__active {
background: var(--color-background);
color: var(--color-primary);
font-weight: 600;
}
/* ── Buscador ────────────────────────────────────────────────── */
#page-totara-catalog-index .tw-selectSearchText__field {
display: flex !important;
align-items: center !important;
background: #fff !important;
border: 2px solid transparent;
border-radius: var(--border-radius-xl) !important;
transition: border-color 0.2s, box-shadow 0.2s;
padding: 0 10px !important;
margin-right: 10px !important;
}
#page-totara-catalog-index .tw-selectSearchText__field:focus-within {
border-color: var(--color-primary-light) !important;
box-shadow: 0 0 0 3px rgba(0, 183, 189, 0.15);
background: #fff !important;
}
#page-totara-catalog-index .tw-selectSearchText__field_input {
border: none !important;
background: transparent !important;
outline: none !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 14px;
color: var(--color-primary);
flex: 1;
}
#page-totara-catalog-index .tw-selectSearchText__field_input::placeholder {
color: var(--color-text-light);
}
#page-totara-catalog-index .tw-selectSearchText__field_clear {
display: flex !important;
align-items: center !important;
line-height: 1;
}
.tw-selectSearchText__field_clear .flex-icon {
padding-bottom: 0;
}
/* Botón lupa: círculo perfecto */
#page-totara-catalog-index .tw-selectSearchText__btn {
background: var(--color-primary) !important;
border-radius: 50% !important;
border: none !important;
color: #fff !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s;
}
#page-totara-catalog-index .tw-selectSearchText__btn:hover {
background: var(--color-primary-light) !important;
}
/* ── Toggle vista lista/ficha ────────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemStyleToggle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--border-radius-small);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.18);
transition: box-shadow 0.15s, background 0.15s;
}
#page-totara-catalog-index .tw-catalogItemStyleToggle__btn:hover {
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.26);
}
/* ── Sidebar de filtros ──────────────────────────────────────── */
#page-totara-catalog-index .tw-selectRegionPanel {
background: #fff;
border-radius: var(--border-radius-large) !important;
box-shadow: 0 2px 16px rgba(0, 105, 117, 0.09);
overflow: hidden;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading {
padding: 16px 18px 12px;
border-bottom: 1px solid var(--color-gray-border);
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_text {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-gray);
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_clear_link {
font-size: 11px;
color: var(--color-primary-light) !important;
font-weight: 600;
text-decoration: none !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__heading_clear_link:hover {
color: var(--color-primary) !important;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector {
border-bottom: 1px solid var(--color-gray-border);
}
#page-totara-catalog-index .tw-selectRegionPanel__selector:last-child {
border-bottom: none;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector_header {
padding: 11px 12px !important;
font-size: 11px;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background 0.15s;
cursor: pointer;
}
#page-totara-catalog-index .tw-selectRegionPanel__selector_header:hover {
background: var(--color-background);
}
/* Suprimir el ">" del tema — la flecha la pone el JS */
#page-totara-catalog-index .tw-selectRegionPanel__selector_header::before {
content: none !important;
}
/* Items de filtro */
#page-totara-catalog-index .tw-selectMulti__link {
padding: 7px 18px 7px 26px;
font-size: 13px;
color: var(--color-primary) !important;
text-decoration: none !important;
transition: background 0.15s, padding-left 0.15s;
position: relative;
}
#page-totara-catalog-index .tw-selectMulti__link::before {
content: '';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary-light);
opacity: 0;
transition: opacity 0.15s;
}
#page-totara-catalog-index .tw-selectMulti__link:hover {
background: var(--color-background);
padding-left: 30px;
}
#page-totara-catalog-index .tw-selectMulti__link:hover::before {
opacity: 1;
}
#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link {
background: rgba(0, 183, 189, 0.08);
font-weight: 600;
padding-left: 30px;
}
#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link::before {
opacity: 1;
}
/* ── Tarjetas de cursos ──────────────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemNarrow {
border-radius: var(--border-radius-large) !important;
box-shadow: 0 2px 10px rgba(0, 105, 117, 0.07);
border: 1.5px solid transparent !important;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
overflow: hidden;
}
#page-totara-catalog-index .tw-catalogItemNarrow:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 105, 117, 0.16) !important;
border-color: var(--color-primary-light) !important;
}
#page-totara-catalog-index .tw-catalogItemNarrow__image_ratio_img {
transition: transform 0.3s ease;
}
#page-totara-catalog-index .tw-catalogItemNarrow:hover .tw-catalogItemNarrow__image_ratio_img {
transform: scale(1.05);
}
/* Elementos ocultos en tarjeta */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item.itemtype,
#page-totara-catalog-index .tw-catalogItemNarrow__noprogress {
display: none !important;
}
/* Descripción — oculta en narrow, visible en wide */
#page-totara-catalog-index .tw-catalogItemNarrow__description {
display: none !important;
}
/* Badge tipo — oculto (ver "Elementos ocultos en tarjeta" arriba) */
/* Título */
#page-totara-catalog-index .tw-catalogItemNarrow__title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
line-height: 1.35;
}
/* Metadatos */
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group {
/* border-top: 1px solid var(--color-gray-border); */
padding-top: 10px;
margin-top: 8px;
}
#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item:not(.itemtype) {
font-size: 12px;
color: var(--color-text-gray);
}
/* Contenido tarjeta */
#page-totara-catalog-index .tw-catalogItemNarrow__content {
padding: var(--gap-4) !important;
}
/* ── Iconos metadatos vista Wide ─────────────────────────────── */
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(3) {
display: none !important;
}
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f017";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f073";
color: var(--color-primary-light);
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
}
/* ── Vista Wide: altura contenedor y título ──────────────────── */
#page-totara-catalog-index .tw-catalogItemWide__content_left {
height: 150px;
}
#page-totara-catalog-index .tw-catalogItemWide__ellipsis {
padding: 2px 30px 10px 20px;
font-size: 18px;
color: var(--color-title-catalog-box);
}
/* ── Resumen en tarjeta Wide ─────────────────────────────────── */
#page-totara-catalog-index .neo-wide-summary {
font-size: 12px;
color: var(--color-text-gray);
line-height: 1.45;
margin: 5px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Botón "Carga más" ───────────────────────────────────────── */
#page-totara-catalog-index .tw-catalogPagination {
display: flex !important;
justify-content: center !important;
}
#page-totara-catalog-index .tw-catalogPagination__btn {
padding: 12px 40px !important;
background: transparent !important;
color: var(--color-primary) !important;
border: 2px solid var(--color-primary) !important;
border-radius: var(--border-radius-xl) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
}
#page-totara-catalog-index .tw-catalogPagination__btn:hover {
background: var(--color-primary) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(0, 105, 117, 0.25) !important;
}
/* ── Panel detalle tarjeta ───────────────────────────────────── */
#page-totara-catalog-index .tw-catalogDetails__content {
border-radius: var(--border-radius-large) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
border: none !important;
}
/* ============================================================
CATÁLOGO — ajustes finos SOBRE el estilo base de arriba. Los
selectores llevan prefijo `body` (más especificidad) y van DESPUÉS
del bloque base, así ganan a sus reglas !important.
Cambios: radio 10px, borde visible como el sidebar + sombra sutil,
filtro seleccionado en azul (antes salmón), filtros más compactos,
iconos de meta y toggle cuadrícula/lista como Material Symbols.
============================================================ */
/* --- Tarjetas: radio 10px, borde visible (como el sidebar) + sombra --- */
body#page-totara-catalog-index .tw-catalogItemNarrow {
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
box-shadow: 0 1px 3px rgba(8, 0, 79, 0.06) !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow:hover {
transform: scale(1.03) !important; /* la caja se agranda */
border-color: var(--teal, #0CE3C6) !important; /* borde teal */
box-shadow: 0 8px 22px rgba(8, 0, 79, 0.12) !important;
z-index: 1 !important; /* queda por encima de las vecinas */
}
/* Título navy · meta gris · iconos de meta en azul corporativo */
body#page-totara-catalog-index .tw-catalogItemNarrow__title,
body#page-totara-catalog-index .tw-catalogItemNarrow__title .tw-catalogItemNarrow__ellipsis {
color: var(--navy-blue, #08004F) !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.3 !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group_item {
color: var(--text-gray, #8A8A9E) !important;
font-size: 13px !important;
}
/* Iconos de meta como MATERIAL SYMBOLS (el organizado los pone en Font
Awesome más arriba: narrow §7 y wide §26). Sobrescribimos fuente, peso y
glifo; reloj = schedule, calendario = calendar_month. Cubre las DOS vistas:
fichas (Narrow) y listado (Wide) — la Wide no lleva el wrapper
__textarea_group, por eso su selector es directo. */
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
font-family: 'Material Symbols Outlined' !important;
font-weight: normal !important;
font-size: 16px !important;
line-height: 1 !important;
vertical-align: middle !important;
margin-right: 5px !important;
color: var(--light-blue, #004DF0) !important;
font-feature-settings: 'liga' !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:first-child::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:first-child::before {
content: 'schedule' !important; /* Duración → reloj */
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before,
body#page-totara-catalog-index .tw-catalogItemWide__textarea_group_item:nth-child(2)::before {
content: 'calendar_month' !important; /* Fecha → calendario */
}
/* --- Sidebar: radio 10px + borde como las tarjetas (mantiene su sombra) --- */
body#page-totara-catalog-index .tw-selectRegionPanel {
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
}
/* Filtros más pequeños/compactos (quedaban grandes) */
body#page-totara-catalog-index .tw-selectRegionPanel__heading_text { font-size: 12px !important; }
body#page-totara-catalog-index .tw-selectRegionPanel__selector_header {
font-size: 11px !important;
padding: 8px 12px !important;
}
body#page-totara-catalog-index .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectTree__list_row_link {
font-size: 12px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Texto de las opciones de filtro → #4A4A63 (el seleccionado sigue en azul,
que se define más abajo con mayor especificidad / orden). */
body#page-totara-catalog-index .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectMulti__link_text,
body#page-totara-catalog-index .tw-selectTree__list_row_link {
color: #4A4A63 !important;
}
/* --- Filtro SELECCIONADO → azul corporativo marcado (antes salmón
#fcefec del organizado:2830). Cubre las tres variantes de estado. --- */
body#page-totara-catalog-index .tw-selectMulti__link_active,
body#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link,
body#page-totara-catalog-index .tw-selectTree__list_row.tw-selectTree__active {
background: rgba(0, 77, 240, 0.10) !important;
color: var(--light-blue, #004DF0) !important;
font-weight: 600 !important;
}
/* Punto y "×" del item seleccionado, en azul */
body#page-totara-catalog-index .tw-selectMulti__list_item[aria-selected="true"] .tw-selectMulti__link::before {
background: var(--light-blue, #004DF0) !important;
opacity: 1 !important;
}
body#page-totara-catalog-index .tw-selectMulti__link_close {
color: var(--light-blue, #004DF0) !important;
}
/* --- "Filtrar por sección" (botón "Todos", .tw-selectTree__current):
light blue y más alto. La regla base ya lo pone en --color-primary
(light blue); este override sube el padding y fuerza el color de marca
(antes estaba en teal, 2026-09-03). Texto/flecha en blanco para contraste. --- */
body#page-totara-catalog-index .tw-selectTree__current {
background: var(--light-blue, #004DF0) !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
color: #fff !important; /* texto blanco sobre light blue */
}
body#page-totara-catalog-index .tw-selectTree__current:hover {
background: var(--blue-hover, #0038C4) !important; /* light blue un punto más oscuro */
color: #fff !important;
}
/* Etiqueta ("Todos") y flecha del botón → blanco */
body#page-totara-catalog-index .tw-selectTree__current_label,
body#page-totara-catalog-index .tw-selectTree__current_icon {
color: #fff !important;
fill: #fff !important;
}
/* --- Buscador (.tw-selectSearchText__field): borde visible, un poco más
ancho y padding en el input para que el texto no se corte por la derecha.
El organizado lo deja con borde transparente y el input sin padding
(css-totara-organizado.css:5905-5931). --- */
body#page-totara-catalog-index .tw-selectSearchText__field {
border: 1px solid #E2E8F0 !important; /* antes 2px transparente */
min-width: 300px !important; /* más ancho */
padding: 0 14px !important;
}
body#page-totara-catalog-index .tw-selectSearchText__field_input {
padding: 0 10px !important; /* aire: el texto ya no se corta */
}
/* --- Grupos de filtro ABIERTOS sin recorte de la última opción. El JS de
colapso pone un `max-height` inline (a veces corto) + `overflow:hidden`,
que corta el último item. Quitamos el límite SOLO a los abiertos: los
cerrados llevan `max-height: 0px` inline y se dejan tal cual para que el
colapso siga funcionando (se pierde la animación suave, no la función). --- */
body#page-totara-catalog-index .tw-selectMulti[style*="max-height"]:not([style*="max-height: 0px"]) {
max-height: none !important;
}
/* --- Toggle cuadrícula/lista (.tw-catalogItemStyleToggle) con iconos
MATERIAL. El tema usa flex-icons (tfont-var-grid-fill); los ocultamos y
ponemos glifos Material: --narrow = grid_view, --wide = view_list.
Activo (btn_active, fondo azul) → icono blanco; inactivo → gris. --- */
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn .flex-icon,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn .flex-icon svg,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn > svg,
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn > img {
display: none !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn::before {
display: inline-block !important;
font-family: 'Material Symbols Outlined' !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 20px !important;
line-height: 1 !important;
color: #6B7280 !important; /* inactivo: gris */
letter-spacing: normal !important; /* no romper la ligadura */
text-transform: none !important; /* no romper la ligadura */
font-feature-settings: 'liga' !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn--narrow::before { content: 'grid_view' !important; }
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn--wide::before { content: 'view_list' !important; }
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn_active::before { color: #fff !important; } /* activo: blanco */
/* Fondo y borde de los botones: inactivo blanco, activo azul corporativo,
ambos con la línea de las cards (#E2E8F0). Quitamos la sombra dura del
organizado (css-totara-organizado.css:5975). */
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn {
background: #fff !important;
border: 1px solid #E2E8F0 !important;
box-shadow: none !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn:hover {
box-shadow: none !important;
border-color: #CBD5E1 !important;
}
body#page-totara-catalog-index .tw-catalogItemStyleToggle__btn_active {
background: var(--light-blue, #004DF0) !important;
}
/* ============================================================
EXPEDIENTE — Cursos como cards (rebranding IVI 2026)
El modulo expediente/expediente-script.html reutiliza los estilos
globales .dai-filters / .dai-empty-notice; las tabs se re-tematizan
dentro de .exp-filters. Paleta nueva: variables de la guía (seccion 1.1).
============================================================ */
/* Títulos de bloque del dashboard Expediente (dashboard-16):
tipografía principal IVI Glance en azul marino */
#page-totara-dashboard-16 .block .block-title h2,
#page-totara-dashboard-16 .block .header .title h2 {
font-family: var(--font-title);
color: var(--navy-blue);
font-weight: 500;
font-size: 2.4rem;
}
/* Fila de badges dentro de la card */
.exp-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
}
.exp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
padding: 7px 12px;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.exp-badge i {
font-size: 12px;
}
/* Tipo de curso — pastilla azul claro con texto azul de marca */
.exp-badge--type {
background: var(--bg-blue, #DCE6FF);
color: var(--light-blue, #004DF0);
}
/* Fecha de inscripción — texto gris sin pastilla */
.exp-badge--enrol {
background: transparent;
color: var(--text-gray, #8A8A9E);
font-weight: 500;
padding-left: 0;
padding-right: 0;
}
/* Finalizado — turquesa con texto azul marino */
.exp-badge--end {
background: var(--teal, #0CE3C6);
color: var(--navy-blue, #08004F);
}
/* En curso / pendiente — gris suave */
.exp-badge--pending {
background: var(--track-beige, #ECE9E2);
color: var(--text-gray, #8A8A9E);
}
/* Barra de progreso al pie de la card */
.exp-progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
.exp-progress__track {
flex: 1;
height: 7px;
background: var(--track-beige, #ECE9E2);
border-radius: 999px;
overflow: hidden;
}
.exp-progress__fill {
height: 100%;
background: var(--teal, #0CE3C6);
border-radius: 999px;
transition: width 0.3s ease;
}
.exp-progress__label {
font-size: 13px;
font-weight: 700;
color: var(--navy-blue, #08004F);
white-space: nowrap;
}
/* Completado: turquesa con etiqueta azul marino (igual que en curso) */
.exp-progress--done .exp-progress__fill { background: var(--teal, #0CE3C6); }
.exp-progress--done .exp-progress__label { color: var(--navy-blue, #08004F); }
/* No superada: barra y texto en rojo */
.exp-progress--failed .exp-progress__fill { background: #c0392b; }
.exp-progress--failed .exp-progress__label { color: #c0392b; }
/* El grid del Expediente usa el base .cyber-standalone__grid: 3 columnas
(2 en ≤900px, 1 en ≤600px). Ver rediseño 2026 más abajo. */
/* --- Card del expediente (autónoma, no depende de .cyber-card) --- */
.exp-card {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(8, 0, 79, 0.06);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
font-family: var(--font-body);
box-shadow: var(--shadow-soft);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.exp-card:hover {
border-color: var(--light-blue, #004DF0);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 77, 240, 0.12), 0 2px 4px rgba(8, 0, 79, 0.06);
text-decoration: none;
color: inherit;
}
/* Imagen a sangre completa. Si el curso no tiene imagen queda el
gradiente azul→menta de marca con un icono como placeholder. */
.exp-card__image {
position: relative;
height: 190px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-blue, #DCE6FF) 0%, var(--bg-mint, #EAF6F3) 100%);
flex-shrink: 0;
}
.exp-card__bg {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Icono placeholder centrado (se oculta cuando llega la imagen real) */
.exp-card__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: rgba(0, 77, 240, 0.28);
pointer-events: none;
}
.exp-card--has-image .exp-card__icon {
display: none;
}
/* Cuerpo de la card: título + badges + progreso */
.exp-card__body {
padding: 18px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
background: #ffffff;
}
.exp-card__title {
display: block;
color: var(--navy-blue, #08004F);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
/* Estado (Finalizado / En curso / No superada) sobre la imagen */
.exp-status {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
padding: 7px 12px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(8, 0, 79, 0.14);
white-space: nowrap;
}
.exp-status i { font-size: 11px; }
.exp-status--done { background: var(--teal, #0CE3C6); color: var(--navy-blue, #08004F); }
.exp-status--pending { background: #ffffff; color: var(--navy-blue, #08004F); }
.exp-status--failed { background: #c0392b; color: #ffffff; }
/* Aviso "sin formaciones" en azul de marca */
.dai-empty-notice--corp {
background: var(--bg-blue, #DCE6FF);
border-color: #C4D4FB;
color: var(--navy-blue, #08004F);
}
.dai-empty-notice--corp .dai-empty-notice__icon {
color: var(--light-blue, #004DF0);
}
/* Tabs del expediente re-tematizadas: pastillas blancas con borde fino
y activa en azul marino sólido (sin gradiente). Acotado a .exp-filters
para no afectar a las tabs one-tech. */
.exp-filters {
--dai-primary: var(--navy-blue, #08004F);
--dai-primary-hover: var(--light-blue, #004DF0);
--dai-primary-light: var(--bg-blue, #DCE6FF);
--dai-primary-dark: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 11px 24px;
border: 1px solid var(--border-soft, #E4E2EE);
background: #ffffff;
color: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn:hover:not(.active) {
border: 1px solid #C4D4FB;
background: var(--bg-blue, #DCE6FF);
color: var(--navy-blue, #08004F);
}
.exp-filters .dai-filter-btn:active:not(.active) {
border: 1px solid #C4D4FB;
}
.exp-filters .dai-filter-btn.active,
.exp-filters .dai-filter-btn.active:hover {
background: var(--navy-blue, #08004F);
border: 1px solid var(--navy-blue, #08004F);
color: #ffffff;
}
.exp-filters .dai-filter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 77, 240, 0.25);
}
/* ------------------------------------------------------------
Expediente 2026 — rediseño de las cards. Todo acotado a #exp-grid
para NO afectar a Monthly Seminars (#ms-grid), que reutiliza .exp-*.
Incluye: título compacto, imagen más alta, color por estado
(badge = barra), badge de recuento en las tabs y paginación cliente.
Los 4 estados: Finalizada / En curso / No iniciada (progreso 0) /
No superada.
------------------------------------------------------------ */
/* Título compacto, sin negrita */
#exp-grid .exp-card__title {
font-size: 13.5px;
font-weight: 500;
line-height: 1.3;
}
/* Encuadre: mostrar la parte superior de la foto (retratos) */
#exp-grid .exp-card__bg {
background-position: center 20%;
}
/* La imagen ocupa más alto y absorbe el espacio sobrante de la card:
en las cards con título corto crece en vez de dejar hueco blanco. */
#exp-grid .exp-card__image {
height: auto;
min-height: 230px;
flex: 1 0 auto;
}
#exp-grid .exp-card__body {
flex: 0 0 auto;
}
/* Color por estado: el badge y la barra comparten color, alineados con
la paleta del donut de estado-cursos. */
#exp-grid .exp-status--done { background: var(--navy-blue, #08004F); color: #ffffff; }
#exp-grid .exp-status--pending { background: var(--teal, #0CE3C6); color: var(--navy-blue, #08004F); }
#exp-grid .exp-status--notstarted { background: var(--light-blue, #004DF0); color: #ffffff; }
#exp-grid .exp-status--failed { background: var(--red, #B4084A); color: #ffffff; }
#exp-grid .exp-progress--done .exp-progress__fill { background: var(--navy-blue, #08004F); }
#exp-grid .exp-progress--encurso .exp-progress__fill { background: var(--teal, #0CE3C6); }
#exp-grid .exp-progress--noiniciada .exp-progress__fill { background: var(--light-blue, #004DF0); }
#exp-grid .exp-progress--failed .exp-progress__fill { background: var(--red, #B4084A); }
#exp-grid .exp-progress--failed .exp-progress__label { color: var(--red, #B4084A); }
/* Badge blanco con el nº de cursos dentro de cada botón del selector.
(.exp-filters .dai-filter-btn ya es inline-flex con gap, más arriba.) */
.exp-filters .dai-filter-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1px solid var(--border-soft, #E4E2EE);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
/* En la pestaña activa (fondo navy) el badge blanco resalta con texto navy */
.exp-filters .dai-filter-btn.active .dai-filter-btn__count {
border-color: #ffffff;
}
/* Paginación cliente de las cards (misma pauta que la de PNTs) */
.exp-pagination {
display: flex;
justify-content: center;
padding: 8px 4px 4px;
margin-top: 8px;
}
.exp-pagination__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 6px;
flex-wrap: wrap;
}
.exp-pagination__item a {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1.5px solid var(--border-soft, #E4E2EE);
background: var(--white, #fff);
color: var(--navy-blue, #08004F);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.15s ease;
cursor: pointer;
}
.exp-pagination__item a:hover {
border-color: var(--light-blue, #004DF0);
color: var(--light-blue, #004DF0);
}
.exp-pagination__item.active a {
background: var(--light-blue, #004DF0);
border-color: var(--light-blue, #004DF0);
color: var(--white, #fff);
}
.exp-pagination__item.disabled a {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
ESTADO DE MIS CURSOS (inst8161): donut + leyenda con barras
Generado por expediente/estado-cursos.html — rebranding IVI 2026
============================================================ */
/* Card contenedora en crema, a ancho completo */
.status-chart {
display: flex;
align-items: center;
width: 100%;
background: var(--warm-gray, #FAF4EE);
border-radius: 14px;
border: 1px solid rgba(8, 0, 79, 0.05);
box-shadow: var(--shadow-soft);
padding: 28px 32px;
font-family: var(--font-body);
}
.status-chart__donut {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
flex-shrink: 0;
cursor: pointer;
}
/* Tooltip al pasar el ratón sobre un segmento del donut */
.status-chart__tip {
position: absolute;
z-index: 5;
transform: translate(-50%, -135%);
background: var(--navy-blue, #08004F);
color: #ffffff;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.status-chart__tip-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
/* Agujero del anillo */
.status-chart__donut::after {
content: "";
position: absolute;
inset: 22px;
background: #ffffff;
border-radius: 50%;
}
.status-chart__center {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.status-chart__total {
font-size: 40px;
font-weight: 800;
line-height: 1;
color: var(--navy-blue, #08004F);
}
.status-chart__total-label {
font-size: 13px;
color: var(--text-gray, #8A8A9E);
margin-top: 3px;
}
/* Tabla descriptiva junto al donut (ocupa el resto del ancho) */
.status-chart__panel {
flex: 1;
min-width: 0;
margin-left: 40px;
}
.status-chart__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--navy-blue, #08004F);
}
.status-chart__th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gray, #8A8A9E);
text-align: left;
padding: 0 16px 10px;
border-bottom: 1px solid #EAE5DA;
white-space: nowrap;
}
.status-chart__th:first-child { padding-left: 0; }
.status-chart__th--num { text-align: right; }
.status-chart__cell {
padding: 11px 16px;
border-bottom: 1px solid #F1ECE2;
white-space: nowrap;
color: var(--navy-blue, #08004F);
}
.status-chart__cell:first-child { padding-left: 0; }
/* Barra horizontal por estado (ancho proporcional, color del estado) */
.status-chart__cell--bar {
width: 48%;
}
.status-chart__bar {
display: block;
height: 8px;
min-width: 26px;
border-radius: 999px;
}
.status-chart__cell--num {
text-align: right;
font-weight: 700;
color: var(--navy-blue, #08004F);
}
.status-chart__cell--pct {
text-align: right;
color: var(--text-gray, #8A8A9E);
}
.status-chart__row:last-child .status-chart__cell { border-bottom: none; }
.status-chart__foot .status-chart__cell {
border-top: 1.5px solid #E3DCCE;
border-bottom: none;
font-weight: 700;
color: var(--navy-blue, #08004F);
}
/* En pantallas estrechas el donut y la tabla se apilan */
@media (max-width: 767px) {
.status-chart {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.status-chart__panel { margin-left: 0; width: 100%; }
.status-chart__cell--bar { width: 30%; }
}
/* ============================================================
MIS CERTIFICADOS (block_mycertificates): miniatura + botones
Generado por expediente/mis-certificados.html — rebranding IVI 2026
============================================================ */
/* Contenedor compartido por las Homes interna (#inst237) y externa
(#inst354): fondo warm gray y acabado de tarjeta del sistema. */
.block_mycertificates .content.block-content {
background: var(--warm-gray, #FAF4EE) !important;
border: 1px solid var(--border-soft, #E4E2EE) !important;
border-radius: 14px !important;
box-shadow: var(--block-shadow, var(--shadow-soft, 0 2px 8px rgba(8, 0, 79, 0.05))) !important;
padding: 24px !important;
font-family: var(--font-body);
}
.block_mycertificates .mycertificates.row {
margin: 0 !important;
row-gap: 24px;
}
.block_mycertificates .certificateitem {
text-align: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.block_mycertificates .certificateitem img.img-responsive {
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 1px 6px rgba(8, 0, 79, 0.16);
}
.mycertificates.row .certificateitem img {
max-width: 150px !important;
}
/* "Descarga tu certificado" (.certificatename) es un texto genérico
redundante con el botón: se oculta EN CUALQUIER contexto (bloque de las
homes, list.php, o donde aparezca), conservando la miniatura si el plugin
la mete dentro (caso list.php). Consolida las antiguas reglas acotadas. */
.certificatename {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
/* Colapsa cualquier hijo de texto/enlace ("Descarga tu certificado"), que
puede traer su propio font-size/line-height y dejaría hueco entre la
miniatura y el título. La imagen se restaura en la regla de abajo. */
.certificatename *:not(img) {
font-size: 0 !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Miniatura visible (list.php la mete dentro de .certificatename), como
bloque centrado para no dejar el hueco de línea base de las imágenes. */
.certificatename img {
font-size: initial !important;
line-height: normal !important;
display: block !important;
margin: 0 auto !important;
}
.block_mycertificates .coursename {
font-size: 13px;
font-weight: 600;
color: var(--navy-blue, #08004F);
line-height: 1.3;
margin-top: 8px;
}
.cert-actions {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 8px !important;
margin-top: 12px !important;
}
.cert-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
margin: 0 !important;
font-size: 12.5px;
font-weight: 600;
padding: 8px 15px;
border: none;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
font-family: var(--font-body);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cert-btn i { font-size: 12px; }
/* "Ver": pastilla azul marino */
.cert-btn--view {
background: var(--navy-blue, #08004F);
color: #ffffff;
}
.cert-btn--view:hover {
background: var(--navy-hover, #1D146F);
color: #ffffff;
text-decoration: none;
}
/* "Descargar": pastilla blanca con borde fino */
.cert-btn--download {
background: #ffffff;
color: var(--navy-blue, #08004F);
border: 1px solid var(--border-soft, #E4E2EE);
}
.cert-btn--download:hover {
background: var(--bg-blue, #DCE6FF);
border-color: #C4D4FB;
color: var(--navy-blue, #08004F);
text-decoration: none;
}
/* --- Certificados rediseño 2026-07-13 (los botones los genera el
script "JS: Mis certificados" con el sistema .ivi-btn) --- */
/* Botonera sin desplazamientos en hover */
.cert-actions .ivi-btn {
margin: 0 !important;
flex: 0 1 auto;
}
.cert-actions .ivi-btn:hover,
.cert-actions .ivi-btn:active {
transform: none !important;
}
/* "Descargar": estados FIJOS en reposo y hover (mismo borde de 2px
siempre → sin saltos), cubriendo la clase nueva (ivi-btn--ghost)
y la vieja (cert-btn--download) por si corre el script anterior */
.cert-actions .ivi-btn--ghost,
.cert-actions .cert-btn--download {
background: #fff !important;
border: 2px solid var(--border-soft, #E3E3E3) !important;
color: var(--navy-blue, #08004F) !important;
transform: none !important;
box-shadow: none !important;
}
.cert-actions .ivi-btn--ghost:hover,
.cert-actions .ivi-btn--ghost:focus,
.cert-actions .cert-btn--download:hover,
.cert-actions .cert-btn--download:focus {
background: var(--bg-blue, #DCE6FF) !important;
border: 2px solid #C4D4FB !important; /* trazo visible sobre el azul */
color: var(--navy-blue, #08004F) !important;
transform: none !important;
box-shadow: none !important;
}
/* "Ver todo" del bloque de certificados (a.seeall, botón NATIVO del
plugin, no lo genera nuestro script): look de botón primario ivi */
.block_mycertificates a.seeall {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-title, 'IVI Glance', 'Noto Sans', sans-serif) !important;
font-size: 15px !important;
font-weight: 400 !important;
background: var(--light-blue, #004DF0) !important;
color: #fff !important;
border: 2px solid var(--light-blue, #004DF0) !important;
border-radius: 999px !important;
padding: 10px 24px !important;
text-decoration: none !important;
transition: background-color .2s ease, color .2s ease;
}
.block_mycertificates a.seeall:hover {
background: #fff !important;
color: var(--light-blue, #004DF0) !important;
border-color: var(--light-blue, #004DF0) !important;
}
/* "Ver todo" centrado y separado de la cuadrícula de certificados */
.block_mycertificates .text-right:has(.seeall) {
text-align: center;
margin-top: 28px;
}
@media (max-width: 767px) {
.block_mycertificates .content.block-content {
padding: 18px !important;
}
}
/* ------------------------------------------------------------
Rejilla de 4 columnas + página de listado (list.php) — 2026
Mismo diseño en el BLOQUE (homes interna/externa) y en la PÁGINA
/blocks/mycertificates/list.php. La miniatura del PDF y los botones
Ver/Descargar los inyecta el módulo de additional-html-footer.js.
NOTA: #page-blocks-mycertificates-list es el id del