:root{--color-primary:#99ac3a;--color-secondary:#007ab8;--color-tertiary:#1ea4a9;--color-body-background:#fbfbfb;--color-state:#313131;--color-state-hover:#3c6721;--color-state-focus:#3c6721;--color-state-active:#30541a;--color-state-highlight:#f6f9d7;--color-state-highlight-neutral:var(--color-neutral-3);--color-state-disabled:var(--color-neutral-5);--color-link-lateral-block:var(--color-state);--color-link-central-block:var(--color-state);--color-title-blocks:#fff;--color-title-catalog-box:var(--color-state);--color-icons:var(--color-state);--color-icons-star-rating:var(--color-state);--color-icons-rss-footer:#fff;--color-neutral-1:#fff;--color-neutral-2:#fafafa;--color-neutral-3:#f7f7f7;--color-neutral-4:#e6e4e4;--color-neutral-5:#c7c7c7;--color-neutral-6:#767676;--color-neutral-7:#262626;--color-background:var(--color-neutral-1);--color-border:var(--color-neutral-5);--color-text:#666666;--color-text-disabled:var(--color-neutral-5);--color-text-hint:var(--color-neutral-6);--link-color:#313131;--link-color-hover:var(--color-state-hover);--color-title-main:var(--color-text);--nav-bg-color:#313131;--nav-text-color:#ffffff;--nav-text-color-hover:var(--color-state-active);--nav-side-seperator-color:var(--nav-text-color);--nav-side-text-color-focus:var(--nav-text-color-hover);--nav-tab-expand-text-color:var(--color-text);--color-header-highlight:#2ABB9C;--font-size-custom:1;--btn-accent-color:#2ABB9C;--btn-accent-color-active:var(--color-state-active);--btn-accent-color-focus:var(--color-state-focus);--btn-accent-color-disabled:var(--color-state-disabled);--btn-prim-accent-color:#2ABB9C;--btn-prim-accent-color-active:var(--color-state-active);--btn-prim-accent-color-focus:var(--color-state-focus);--btn-prim-accent-color-disabled:var(--color-state-disabled);--btn-button-border-radius:4px;--footer-background-color:#313131;--footer-text-color:#FFFFFF;--second-footer-background-color:#313131;--second-footer-text-color:#FFFFFF;--block-background-color:#FFFFFF;--block-radius:4px;--block-border:0px solid #f00;--block-shadow:0 1px 3px 1px #ddd;--block-pre-header-color:#FFFFFF;--block-pre-header-background:#FDC151}:root{--select-icon-size:var(--gap-1)}.tui-select__input{display:inline-block;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;color:black;font:400 13.3333px Arial;font-size:inherit;line-height:inherit;letter-spacing:normal;white-space:pre;text-align:start;text-transform:none;text-indent:0;text-shadow:none;word-spacing:normal;background-color:white;border-color:darkgrey;border-style:solid;border-width:1px;border-radius:0;border-image:initial;box-shadow:none;cursor:default;transition-delay:0s;transition-timing-function:ease;transition-duration:0s;transition-property:all;text-rendering:auto;-webkit-appearance:menulist;appearance:menulist}.tui-select__input[disabled]{color:#3d444b;background:#dadada;cursor:default}.tui-select__input[multiple]{height:auto;overflow-x:hidden;overflow-y:visible}.tui-select__input:focus{border-color:#dadada;outline-width:3px;outline-style:auto;outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-offset:-2px;box-shadow:none;-moz-user-focus:normal}.tui-select{position:relative;display:flex;flex-grow:unset;width:100%;min-width:0;height:var(--form-input-height)}.tui-select--charLength-2{max-width:calc(2 * var(--form-input-font-size))}.tui-select--charLength-3{max-width:calc(3 * var(--form-input-font-size))}.tui-select--charLength-4{max-width:calc(4 * var(--form-input-font-size))}.tui-select--charLength-5{max-width:calc(5 * var(--form-input-font-size))}.tui-select--charLength-10{max-width:calc(10 * var(--form-input-font-size))}.tui-select--charLength-15{max-width:calc(15 * var(--form-input-font-size))}.tui-select--charLength-20{max-width:calc(20 * var(--form-input-font-size))}.tui-select--charLength-25{max-width:calc(25 * var(--form-input-font-size))}.tui-select--charLength-30{max-width:calc(30 * var(--form-input-font-size))}.tui-select--charLength-50{max-width:calc(50 * var(--form-input-font-size))}.tui-select--charLength-75{max-width:calc(75 * var(--form-input-font-size))}.tui-select--charLength-100{max-width:calc(100 * var(--form-input-font-size))}.tui-form--inputWidth-limited .tui-select:not(.tui-input--customSize){max-width:var(--form-input-limited-width)}.tui-form--inputWidth-limited .tui-inputSet--split .tui-select:not(.tui-input--customSize){max-width:none}.tui-select::after{position:absolute;top:calc((var(--form-input-height) - var(--select-icon-size)) / 2);right:calc((var(--form-input-height) - var(--select-icon-size) * 2) / 2);display:block;width:0;height:0;border:var(--select-icon-size) solid transparent;border-top-color:var(--form-input-text-color);content:'';pointer-events:none}.tui-select--disabled::after{border-top-color:var(--form-input-text-color-disabled)}.tui-select--multiple::after{display:none}.tui-select--large{height:var(--form-input-height-large)}.tui-select--large::after{top:calc((var(--form-input-height-large) - var(--select-icon-size)) / 2);right:calc((var(--form-input-height-large) - var(--select-icon-size) * 2) / 2)}.tui-select__input{flex-grow:1;box-sizing:border-box;width:100%;min-width:0;padding:0 var(--gap-6) 0 var(--gap-1);color:var(--form-input-text-color);font-size:var(--form-input-font-size);background:var(--form-input-bg-color);border:var(--form-input-border-size) solid;border-color:var(--form-input-border-color);-webkit-appearance:none;appearance:none}.tui-select__input[multiple]{height:auto}.tui-select__input[disabled]{color:var(--form-input-text-color-disabled);background:var(--form-input-bg-color-disabled);border-color:var(--form-input-border-color-disabled)}.tui-select__input:focus{background:var(--form-input-bg-color-focus);border:var(--form-input-border-size) solid;border-color:var(--form-input-border-color-focus);outline:none;box-shadow:var(--form-input-shadow-focus)}.tui-contextInvalid .tui-select__input:focus{background:var(--form-input-bg-color-invalid-focus);border-color:var(--form-input-border-color-invalid);box-shadow:var(--form-input-shadow-invalid-focus)}.tui-select__input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.tui-select__input::-ms-expand{display:none}.tui-select__input::-ms-value{color:inherit;background-color:transparent}.tui-contextInvalid .tui-select__input{border-color:var(--form-input-border-color-invalid);box-shadow:var(--form-input-shadow-invalid)}:root{--nav-bg-color: #FFFFFF;--nav-text-color: #08004f;--color-primary: #0ce3c6;--btn-prim-accent-color: #004df0;--btn-accent-color: #0a024f;--link-color: #313131;--color-state: #004df0;--color-text: #000000;--block-background-color: #FFFFFF;--block-radius: 10px;--block-border: 0px solid #f00;--block-shadow: 0 1px 3px 1px #ddd;--block-pre-header-color: #FFFFFF;--block-pre-header-background: #08004f;--color-link-lateral-block: #0a024f;--color-link-central-block: #0a024f;--color-title-main: #08004f;--color-title-blocks: #08004f;--color-title-catalog-box: #08004f;--color-icons: #004df0;--color-header-highlight: #004df0;--color-icons-star-rating: #0ce3c6;--color-body-background: #ffffff;--color-icons-rss-footer: #0ce3c6;--btn-button-border-radius: 100px;--nav-text-color-hover: #000031;--btn-prim-accent-color-focus: #0043e6;--btn-prim-accent-color-active: #0032d5;--btn-accent-color-focus: #000045;--btn-accent-color-active: #000034;--link-color-hover: #131313;--color-state-hover: #0043e6;--color-state-focus: #0043e6;--color-state-active: #0032d5;--font-size-custom: 1;--footer-background-color: #08004f;--footer-text-color: #FFFFFF;--second-footer-background-color: #08004f;--second-footer-text-color: #FFFFFF;}
/* --- ⚠️ ⚠️ NO BORRAR ⚠️ ⚠️  --- */
/* --- Barra de entorno PRE - DEJAR SIEMPRE AQUÍ --- */
body::before {
  content: "⚠️ SITIO EN PRE ⚠️";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background-color: #b4084a;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

body {
  padding-top: 38px !important;
}

/* --- ⚠️ ⚠️ NO BORRAR ⚠️ ⚠️  --- */

/* --- ⬇️ DE AQUÍ HACIA ABAJO PARA REALIZAR PRUEBAS ⬇️ --- */

/* Fusionado en css-totara-organizado.css:
   - Monthly Seminars #inst8174 + hero .ivi-cert-hero (2026-07-15).
   - Certificados LfE (cmid-20259): fondo warm-gray, toolbar de pestañas,
     paginación, buscador, formulario (ivi-cert-*) y vista LISTADO
     (.ividb_cert / .ivi-cert-list__*); + Visor: badges de Formación
     Obligatoria (.title_lfe.visor) (2026-07-20).
   - Visor de puntos (#inst277-281): tabla original + badge de puntos/estado,
     iconos Material por módulo, colores de cabecera nuevos, puntuación como
     pastilla (.lfe-puntuacion), Formación Obligatoria en azul corporativo,
     sin fondo blanco, "Realizado" a la izquierda y "Pendiente" en la fecha;
     + Enlaces de interés #links-lfe (tiles 200px, imagen al ancho) y
     .no-obligatorio con borde naranja; + .totaraNav_prim--list_item_label
     (2026-07-21). El JS de badges vive en
     bloques/4-codigo-nuevo/visor-puntos--badges-puntos.html.
   Aquí solo queda la barra PRE (NO BORRAR). Añadir nuevas pruebas debajo. */


/* ============================================================
   "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 <a>/imagen del logo hereda algún fondo: transparente. */
.ivi-mylfe__logo,
.ivi-mylfe__logo img {
  background: transparent !important;
}


/* ============================================================
   CATÁLOGO (#page-totara-catalog-index) — ajustes finos SOBRE el
   estilo que ya trae el organizado (css-totara-organizado.css:5882-6103).
   Prefijo `body` para ganar a sus reglas !important (radio/borde) pese
   a que el "CSS adicional" cargue antes.
   Cambios: radio 4px, borde visible como el sidebar + sombra sutil,
   filtro seleccionado en azul (antes salmón), filtros más compactos.
   ============================================================ */

/* --- Tarjetas: radio 4px, 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, css-totara-organizado.css:2723-2741). Sobrescribimos fuente,
   peso y glifo; reloj = schedule, calendario = calendar_month. */
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 {
  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 {
  content: 'schedule' !important;          /* Duración → reloj */
}
body#page-totara-catalog-index .tw-catalogItemNarrow__textarea_group .tw-catalogItemNarrow__textarea_group_item:nth-child(2)::before {
  content: 'calendar_month' !important;    /* Fecha → calendario */
}

/* --- Sidebar: radio 4px + 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):
   teal y más alto. El organizado lo pone azul (background var(--color-primary),
   css-totara-organizado.css:5854) con padding 6px. --- */
body#page-totara-catalog-index .tw-selectTree__current {
  background: var(--teal, #0CE3C6) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  color: var(--navy-blue, #08004F) !important;   /* texto en navy (antes blanco) */
}
body#page-totara-catalog-index .tw-selectTree__current:hover {
  background: #0AC4AA !important;   /* teal un punto más oscuro al pasar el ratón */
  color: var(--navy-blue, #08004F) !important;
}
/* Etiqueta ("Todos") y flecha del botón → navy */
body#page-totara-catalog-index .tw-selectTree__current_label,
body#page-totara-catalog-index .tw-selectTree__current_icon {
  color: var(--navy-blue, #08004F) !important;
  fill: var(--navy-blue, #08004F) !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;
}


                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Bold.woff") format("woff");
                    font-weight: bold;
                    font-style: normal;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Light.woff") format("woff");
                    font-weight: 300;
                    font-style: normal;
                    font-display: swap;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Medium.woff") format("woff");
                    font-weight: 500;
                    font-style: normal;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Regular.woff") format("woff");
                    font-weight: normal;
                    font-style: normal;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Bold.woff") format("woff");
                    font-weight: bold;
                    font-style: normal;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Light.woff") format("woff");
                    font-weight: 300;
                    font-style: normal;
                    font-display: swap;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Medium.woff") format("woff");
                    font-weight: 500;
                    font-style: normal;
                }
                @font-face {
                    font-family: "NotoSans";
                    src: url("https://ivirma.actuatxp.com/theme/actua/webfont.php?nomfont=NotoSans-Regular.woff") format("woff");
                    font-weight: normal;
                    font-style: normal;
                }
            body {
                font-family: NotoSans;
            }