@charset "UTF-8";
/****************************************************/
/*                      LAYOUT                      */
/****************************************************/
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --ituc2_hover: #1c2b5a;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Tokens de la plantilla. Cada tema (CustomStyles/<Tema>.scss) redefine en :root los que
     necesite; lo normal es que baste con los de marca y superficie, porque el resto se derivan
     de ellos. Los derivados se resuelven en el elemento, así que cambiar --brand-primary en el
     tema repinta también el menú y las cabeceras de modal sin tocar nada más. */
  --brand-primary: #212F3D;
  --brand-primary-contrast: white;
  --brand-primary-dark: #1C2833;
  --surface-bg: white;
  --surface-muted-bg: rgb(228, 236, 239);
  --text-color: #212529;
  --text-muted-color: #6c757d;
  --border-color: #dee2e6;
  --tab-border: var(--border-color);
  --content-bg: #f4f6f9;
  --aside-bg: var(--brand-primary);
  --aside-text-color: var(--brand-primary-contrast);
  --aside-header-bg: var(--brand-primary-dark);
  --aside-header-text-color: #aeb6bf;
  --aside-hover-bg: rgba(255, 255, 255, 0.1);
  --aside-open-bg: rgba(0, 0, 0, 0.15);
  --aside-active-bg: rgba(255, 255, 255, 0.2);
  --aside-active-marker-color: var(--aside-text-color);
  --modal-bg: var(--surface-bg);
  --modal-text-color: var(--text-color);
  --modal-header-bg: var(--brand-primary);
  --modal-header-text-color: var(--brand-primary-contrast);
  --modal-inner-bg: var(--surface-muted-bg);
  --modal-border-color: var(--border-color);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.4);
  --login-bg: #343a40;
  --login-button-bg: #ffc107;
  --login-button-text-color: #1f2d3d;
  --login-button-hover-bg: #e0a800;
  --login-link-color: #007bff;
  --button-primary-bg: #007bff;
  --button-primary-text-color: white;
  --button-primary-hover-bg: #0069d9;
  --button-primary-active-bg: #0062cc;
}

/* source-sans-3-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 500;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 600;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 700;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 900;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 900;
  src: url("../../fonts/Source_Sans_3/source-sans-3-v19-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
#topnavigation .text-ituc {
  color: #212F3D !important;
}
#topnavigation h1 {
  font-size: 1.5rem;
  margin: 0;
}
#topnavigation li.title {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#main-aside, #mainnavigation, #menu_lateral {
  background-color: var(--aside-bg);
  color: var(--aside-text-color);
  overflow-x: hidden;
}
#main-aside .nav-header, #mainnavigation .nav-header, #menu_lateral .nav-header {
  display: flex;
  align-items: center;
  padding-left: 1rem; /* el mismo que .nav-link, para que los iconos caigan en la misma columna */
  background-color: var(--aside-header-bg) !important;
  margin: 0;
  color: var(--aside-header-text-color);
  font-weight: bold;
  text-align: left;
}
#main-aside .aside-logo, #mainnavigation .aside-logo, #menu_lateral .aside-logo {
  padding: 0.2em;
  height: 60px;
  text-align: center;
}
#main-aside .aside-logo img, #mainnavigation .aside-logo img, #menu_lateral .aside-logo img {
  height: 100%;
  width: auto;
}
#main-aside, #mainnavigation, #menu_lateral {
  /* Opciones del menú. El color sale del tema y no de la clase text-white, para que una plantilla
     con el lateral claro pueda cambiarlo sin pelearse con un !important. El #id gana en
     especificidad a los skins de AdminLTE (.sidebar-dark-* .nav-sidebar > .nav-item > .nav-link).
     El texto va en <p>, como espera AdminLTE, que es lo que lo oculta al plegar el lateral. Sin
     transform en el hover: el escalado desplazaba el texto y lo emborronaba. */
}
#main-aside .nav-link, #mainnavigation .nav-link, #menu_lateral .nav-link {
  display: flex;
  align-items: center;
  color: var(--aside-text-color);
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out;
}
#main-aside .nav-link:hover, #main-aside .nav-link:focus, #mainnavigation .nav-link:hover, #mainnavigation .nav-link:focus, #menu_lateral .nav-link:hover, #menu_lateral .nav-link:focus {
  background-color: var(--aside-hover-bg);
  color: var(--aside-text-color);
}
#main-aside .nav-link:focus-visible, #mainnavigation .nav-link:focus-visible, #menu_lateral .nav-link:focus-visible {
  outline: 2px solid var(--aside-text-color);
  outline-offset: -2px;
}
#main-aside, #mainnavigation, #menu_lateral {
  /* Hueco fijo para el icono y separación con el texto, en todos los niveles y también en las
     cabeceras, que no son .nav-item y AdminLTE no les da anchura: sin esto el icono quedaba
     pegado al texto y los títulos no alineaban entre sí. */
}
#main-aside .nav-icon, #mainnavigation .nav-icon, #menu_lateral .nav-icon {
  flex: 0 0 auto;
  width: 1.6rem;
  margin-right: 0.6rem;
  text-align: center;
}
#main-aside .nav-item.menu-open > .nav-link, #mainnavigation .nav-item.menu-open > .nav-link, #menu_lateral .nav-item.menu-open > .nav-link {
  background-color: var(--aside-open-bg);
}
#main-aside, #mainnavigation, #menu_lateral {
  /* Opción de la página actual. Además del fondo lleva barra lateral y negrita, para que no dependa
     solo del color. Cubre el hover para que pasar por encima no la apague, y fija el color del
     texto porque el de .nav-pills .nav-link.active de AdminLTE es azul de Bootstrap. */
}
#main-aside .nav-link.active, #main-aside .nav-link.active:hover, #main-aside .nav-link.active:focus, #mainnavigation .nav-link.active, #mainnavigation .nav-link.active:hover, #mainnavigation .nav-link.active:focus, #menu_lateral .nav-link.active, #menu_lateral .nav-link.active:hover, #menu_lateral .nav-link.active:focus {
  background-color: var(--aside-active-bg);
  color: var(--aside-text-color);
  box-shadow: inset 4px 0 0 var(--aside-active-marker-color);
  font-weight: 600;
}
#main-aside .nav-item .nav-item, #mainnavigation .nav-item .nav-item, #menu_lateral .nav-item .nav-item {
  padding-left: 1em;
}
#main-aside, #mainnavigation, #menu_lateral {
  /* Lateral plegado (sin el ratón encima, que AdminLTE lo despliega): solo iconos, en una única
     columna. AdminLTE oculta el <p> de las opciones, pero no el texto de las cabeceras. */
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #main-aside .nav-header-text, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #mainnavigation .nav-header-text, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #menu_lateral .nav-header-text {
  display: none;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #main-aside .nav-item .nav-item, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #mainnavigation .nav-item .nav-item, .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) #menu_lateral .nav-item .nav-item {
  padding-left: 0;
}

#main-aside .user-menu, #mainnavigation .user-menu, #menu_lateral .user-menu {
  /* Tamaño de la imagen del usuario */
}
#main-aside .user-menu .imgperfil, #mainnavigation .user-menu .imgperfil, #menu_lateral .user-menu .imgperfil {
  width: 15%;
  height: 15%;
}
#main-aside .user-menu .imgperfil2, #mainnavigation .user-menu .imgperfil2, #menu_lateral .user-menu .imgperfil2 {
  max-height: 100px;
  max-width: 100px;
}
#main-aside .user-menu > div a, #mainnavigation .user-menu > div a, #menu_lateral .user-menu > div a {
  color: #1f2d3d;
}

body > .content-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--content-bg);
}
body > .content-wrapper > .content > .nav-tabs {
  margin-top: 0.5em;
}
body > .content-wrapper > .content > .nav-tabs .tab-content {
  margin: 0;
}

/****************************************************/
/*                    COMPONENTS                    */
/****************************************************/
button.btn-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Estado ocupado del botón (bloqueo automático mientras se ejecuta la acción).
   El spinner se dimensiona como el icono al que sustituye, para que un botón de solo
   icono no cambie de tamaño al bloquearse. */
.btn .btn-spinner {
  width: 1em;
  height: 1em;
  line-height: 1.5;
  border-width: 0.15em;
  vertical-align: -0.125em;
}

/* Botón principal pintado con los tokens de la plantilla, para que cada cliente lo vista de su marca
   sin perseguir los selectores de Bootstrap. Repite los de AdminLTE con la misma especificidad: como
   esta hoja se carga después, gana sin !important. El modo oscuro de AdminLTE sigue mandando. */
.btn-primary {
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-hover-bg);
  border-color: var(--button-primary-active-bg);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-active-bg);
  border-color: var(--button-primary-active-bg);
}

.btn-ituc {
  background-color: #EAECEE;
  border: 1px solid #343a40;
  color: #343a40;
}
.btn-ituc:hover {
  background-color: var(--ituc2_hover) !important;
  color: white !important;
}

/*INI VMM 2025-05-26 Admision familiares. Evitar bordes en algunos casos*/
.btn-ituc-noborder {
  background-color: #EAECEE;
  border: none; /* Quita el borde */
  color: #343a40;
  box-shadow: none; /* Quita sombra si hay */
  outline: none; /* Quita contorno al enfocar */
}
.btn-ituc-noborder:focus, .btn-ituc-noborder:active {
  border: none;
  outline: none;
  box-shadow: none;
}

/*FIN VMM 2025-05-26 Admision familiares. Evitar bordes en algunos casos*/
.btn-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.btn-container button {
  margin: 5px;
}

.btn.btn-primary.btn-color-custom {
  background-color: #EAECEE !important;
  border: 1px solid #343a40 !important;
  color: #343a40 !important;
  font-weight: bold !important;
}

.card .card-header {
  position: relative;
  min-height: 2em;
  display: flex;
  flex-direction: row;
  margin-bottom: 1em;
}
.card .card-header .header-content {
  flex-grow: 1;
}
.card .card-header #btnCollapseTabs {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, 50%);
}
.card .card-header .header-buttons {
  display: flex;
}
.card .card-header .header-buttons button {
  margin: 0 2pt;
}
.card.borde-superior {
  border-top: 4px solid #0dcaf0;
}
.card.borde-superior2 {
  border-top: 4px solid #343a40 !important; /* dark */
}
.card.borde-superior3 {
  border-top: 4px solid #00ff21 !important; /* verde */
}
.card.borde-superior4 {
  border-top: 4px solid #FFA500 !important; /* naranja */
}

textarea {
  flex: 1 1 auto;
  width: 100% !important;
  min-height: 0;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
}
textarea.textarea-resize { /*VMM 2024-11-19 hacer que los textareas se puedan expandir hacia la decha y hacia abajo*/
  resize: both;
  max-width: 500px; /* Ancho máximo */
  max-height: 500px; /* Alto máximo */
  min-width: 200px; /* Ancho mínimo */
  min-height: 200px; /* Alto mínimo */
}
textarea {
  /*VMM 2025-08-07 Para hacer mas grande el area de texto en caso de los Mensajes/Observaciones en Censo*/
}
textarea.textarea-grande {
  height: 150px !important;
  width: 1000px !important;
}
textarea.textarea-resize-basic { /*VMM 2024-11-19 hacer que los textareas se puedan expandir hacia la decha y hacia abajo*/
  resize: both;
  max-width: 500px; /* Ancho máximo */
  max-height: 500px; /* Alto máximo */
  min-width: 300px; /* Ancho mínimo */
  min-height: 30px; /* Alto mínimo */
}
textarea {
  /*INI VMM 2025-08-25 Censo. Ajustes de los textareas*/
}
textarea.textarea-fill, textarea.textarea-fill > div {
  display: flex;
  flex-direction: column;
  height: 100% !important;
}
textarea {
  /* El textarea dentro del helper */
}
textarea.textarea-fill {
  flex: 1 1 auto;
  width: 100% !important;
  min-height: 0;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
}
textarea {
  /*FIN VMM 2025-08-25*/
}

.form-group {
  display: inline-block;
}
.form-group label.error {
  color: var(--danger);
}
.form-group {
  /*INI VMM 2024-06-26 Alinear en una sola fila el combo y los botones de busqueda, edicion,... Viene del adminlte.min.css. Sobreescribimos aqui*/
}
.form-group .input-group {
  flex-wrap: nowrap;
  /*
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: nowrap !important;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
  */
}
.form-group .input-group .validation-message {
  display: block;
  font-size: 80%;
  color: #dc3545;
  width: 100%;
}
.form-group input.invalid {
  border-color: #dc3545;
  padding-right: 2.25rem !important;
}

.validation-errors {
  padding: 1em;
  font-size: 80%;
  color: #dc3545;
  width: 100%;
}

.checkbox {
  display: inline-block;
}

/* Combos multicheck de las pantallas MVC del iTUC anterior, que siguen usando select2: la web Blazor
   ya no lo carga (sus desplegables son ISelect), pero el plugin se sigue sirviendo para aquellas.
   INI VMM 2024-06-26: cambia el color de la letra de sus elementos. Viene del select2.min.css. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
  /*color: #fff;*/ /*Antes de color blanco ahora negro, antes no se veia bien*/
  color: #007bff !important;
  font-weight: bold; /* Ponemos negrita que se ve mejor*/
}

/* Colores comunes a todos los modales: los de Bootstrap (MVC y Blazor), .app-modal, .capamodal y
  .capamodalbasic. Salen de los tokens de _Variables.scss para que sigan la plantilla de cada
  cliente; un tema cambia la cabecera redefiniendo --modal-header-bg/--modal-header-text-color, o
  solo --brand-primary, de la que derivan. */
.modal-content {
  background-color: var(--modal-bg);
  color: var(--modal-text-color);
  border-color: var(--modal-border-color);
}

.modal-header {
  background: var(--modal-header-bg);
  color: var(--modal-header-text-color);
  border-bottom-color: var(--modal-border-color);
}
.modal-header .modal-title {
  color: inherit;
}
.modal-header {
  /* El aspa de Bootstrap 4 es negra con opacidad fija: sobre una cabecera oscura no se veía. */
}
.modal-header .close {
  color: inherit;
  text-shadow: none;
  opacity: 0.8;
}
.modal-header .close:hover, .modal-header .close:focus {
  color: inherit;
  opacity: 1;
}

.modal-footer {
  border-top-color: var(--modal-border-color);
}

.modal-backdrop.show {
  background-color: var(--modal-backdrop-bg);
  opacity: 1;
}

/* Modal antiguo*/
.capamodal {
  /*INI VMM 2024-10-08 Arreglar el problema del modal de edición que no funcionaba en edge y chrome*/
  /*position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
  width: 90%;
  height: 75%;
  min-height: max-content;
  z-index: 100;*/
  position: absolute;
  top: 50%; /* Para centrar verticalmente */
  left: 50%; /* Para centrar horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste para que el modal esté en el centro */
  width: 90%; /* Ajusta el ancho del modal */
  height: 80%;
  /* Por encima del menú lateral y la barra superior de AdminLTE (1038) y por debajo de los
     modales Bootstrap de búsqueda/relación (1050), que deben seguir apilándose sobre este. */
  z-index: 1040;
  padding: 20px;
  /*FIN VMM 2024-10-08 Arreglar el problema del modal de edición que no funcionaba en edge y chrome*/
}
.capamodal .content-wrapper {
  background-color: var(--modal-inner-bg);
}
.capamodal .modal-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: var(--modal-border-color);
  cursor: se-resize;
  z-index: 101;
  border-radius: 0 0 4px 0;
}
.capamodal .modal-dialog {
  max-width: 75vw;
  overflow: visible;
  max-height: 75vh;
}
.capamodal {
  /* La sombra va en el recuadro visible: al aplicarla a la capa exterior quedaba separada de él
     por el padding y se percibía como un halo suelto alrededor del modal. */
}
.capamodal .modal-content {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}
.capamodal .modal-body > * {
  background: var(--modal-bg);
}

/* Atenúa el fondo mientras haya un modal genérico abierto, para dar énfasis al modal.
   Se resuelve con :has() en lugar de crear/destruir una capa desde JS porque estos modales se
   cierran desde muchos puntos distintos; así el fondo desaparece siempre con el modal.
   Sin pointer-events para no alterar el comportamiento actual de clic sobre el fondo. */
body:has(.capamodal)::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--modal-backdrop-bg);
  z-index: 1039;
  pointer-events: none;
}

/* Modal nuevo */
.app-modal {
  /* Capa a pantalla completa, fija respecto a la ventana, con el diálogo centrado dentro. Antes
     era una caja `absolute` centrada con `transform`, y eso juntaba dos problemas:

     - Un modal abierto desde dentro de otro se colocaba respecto al modal padre, que está
       posicionado y además transformado —y un ancestro transformado fija también el marco de
       referencia de los descendientes `fixed`—, así que salía descentrado y solapado con él. El
       paso 5 del asistente de plan de actividad encadena cuatro niveles y ahí no se podía ni
       pinchar: los clics iban a parar al modal de debajo.
     - Con `max-height: 50vh` y `overflow: visible`, lo que no cabía se salía de la caja y solo se
       alcanzaba desplazando la página entera.

     Ahora la capa ocupa la ventana y es ella la que se desplaza, como el modal de Bootstrap: el
     diálogo puede ser más alto que la pantalla sin que nada quede fuera de alcance, y al ser la
     capa `fixed` sin transformar, un modal anidado se coloca respecto a la ventana y no respecto
     a quien lo abrió. El panel de un desplegable sigue sin recortarse, porque el diálogo no tiene
     `overflow` propio; si cae por debajo del borde, el foco que el desplegable lleva a su buscador
     al abrirse trae la capa hasta él. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1500; /* Asegura que esté encima de otros elementos */
}
.app-modal .content-wrapper {
  background-color: var(--modal-inner-bg);
}
.app-modal .modal-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: var(--modal-border-color);
  cursor: se-resize;
  z-index: 101;
  border-radius: 0 0 4px 0;
}
.app-modal .modal-dialog {
  max-width: 75vw;
  /* El diálogo crece lo que necesite y es la capa la que se desplaza. Con un `max-height`
     aquí volvería a haber contenido fuera de la caja, que es de lo que se venía. El aire de
     arriba y abajo deja agarrar la cabecera para moverlo. */
  margin: 1.75rem auto;
  overflow: visible;
}
.app-modal .modal-body > * {
  background: var(--modal-bg);
}
.app-modal .form-buttons {
  margin: 1em 0;
  justify-content: space-around;
  display: flex;
}
.app-modal .form-buttons i {
  margin-right: 0.25em;
}

/*FIN VMM 2024-10-30*/
/*INI 2024-11-13 capas para el modal de edicion basic*/
.capamodalbasic {
  position: fixed;
  z-index: 100; /* Encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ocupa toda la pantalla */
  height: 100%;
  background-color: var(--modal-backdrop-bg);
  display: flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
}

/* Estilos para el contenido del modal basic*/
.modalbasic-contenido {
  background-color: var(--modal-bg);
  color: var(--modal-text-color);
  left: 15%;
  top: 15%;
  width: 70%; /*Ancho del modal */
  height: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra en el modal */
  position: relative;
}

/*FIN 2024-11-13 capas para el modal de edicion basic*/
.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--modal-backdrop-bg);
  z-index: 1200;
  cursor: no-drop;
}

@keyframes popupZoomIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
}
.popup .popup-wrap {
  position: absolute;
  background: var(--modal-bg);
  color: var(--modal-text-color);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  border-radius: 1rem;
  z-index: 2;
  animation: popupZoomIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.popup .popup-background {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(1px);
  z-index: 1;
}
.popup.confirmation .actions {
  padding: 2em 1em 0 1em;
  display: flex;
  justify-content: space-between;
}
.popup.confirmation .actions i {
  margin-right: 0.5em;
}

/* Árbol de gestión de menús (Areas/Menus). Las opciones con hijas se muestran como bloques
   delimitados (card en la raíz, panel en los grupos anidados) para verse claramente separadas;
   las hojas, como fila simple. Coloreado por tipo. Usa las variables de _Variables.scss. */
/* Barra de acciones sobre el árbol (colapsar/expandir/nueva): botones en fila a la izquierda */
.menu-tree-toolbar {
  gap: 0.35rem;
}

.menu-tree {
  font-size: 0.9rem;
  /* Cada bloque/grupo (opción con hijas) es un panel delimitado */
}
.menu-tree .menu-group {
  border: 1px solid var(--tab-border);
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
  background-color: var(--white);
  overflow: hidden;
}
.menu-tree {
  /* Los bloques de primer nivel destacan como tarjetas */
}
.menu-tree .menu-group--root {
  margin-bottom: 0.9rem;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.menu-tree .menu-tree-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease-in-out;
}
.menu-tree .menu-tree-row:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.menu-tree .menu-tree-row {
  /* Acento de color por tipo de opción */
}
.menu-tree .menu-tree-row--header {
  border-left-color: var(--primary);
}
.menu-tree .menu-tree-row--tree {
  border-left-color: var(--info);
}
.menu-tree .menu-tree-row--link {
  border-left-color: var(--success);
}
.menu-tree .menu-tree-row--unknown {
  border-left-color: var(--gray);
}
.menu-tree .menu-tree-row {
  /* Hoja suelta (sin panel): pequeño respiro entre filas */
}
.menu-tree .menu-tree-row--leaf {
  border: 1px solid var(--tab-border);
  border-left-width: 3px;
  border-radius: 0.3rem;
  margin-bottom: 0.35rem;
}
.menu-tree {
  /* Cabecera de un grupo: fondo tenue y separador respecto a sus hijos */
}
.menu-tree .menu-group > .menu-tree-row--group {
  background-color: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid var(--tab-border);
}
.menu-tree .menu-group--root > .menu-tree-row--group {
  background-color: rgba(0, 0, 0, 0.045);
  font-weight: 600;
}
.menu-tree {
  /* Botón desplegar/colapsar; las hojas reservan el mismo hueco */
}
.menu-tree .menu-tree-toggle {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray);
  cursor: pointer;
}
.menu-tree .menu-tree-toggle:hover {
  color: var(--dark);
}
.menu-tree .menu-tree-toggle--leaf {
  cursor: default;
}
.menu-tree .menu-tree-check {
  flex: 0 0 auto;
  margin: 0;
  padding-left: 1.25rem;
}
.menu-tree .menu-tree-badge {
  flex: 0 0 auto;
  color: #fff;
}
.menu-tree .menu-tree-badge--header {
  background-color: var(--primary);
}
.menu-tree .menu-tree-badge--tree {
  background-color: var(--info);
}
.menu-tree .menu-tree-badge--link {
  background-color: var(--success);
}
.menu-tree .menu-tree-badge--unknown {
  background-color: var(--gray);
}
.menu-tree .menu-tree-icon {
  flex: 0 0 auto;
  color: var(--gray-dark);
}
.menu-tree .menu-tree-label {
  flex: 1 1 auto;
}
.menu-tree .menu-tree-count {
  flex: 0 0 auto;
  color: var(--dark);
}
.menu-tree .menu-tree-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0.15rem;
  visibility: hidden;
}
.menu-tree .menu-tree-row:hover .menu-tree-actions {
  visibility: visible;
}
.menu-tree {
  /* Contenido de un grupo: indentación y respiro; el borde del panel ya delimita */
}
.menu-tree .menu-tree-children {
  padding: 0.4rem 0.5rem 0.15rem 1rem;
}

section.search-section {
  width: 100%;
  padding: 1em 0 1em 0;
}
section.search-section h2 {
  font-size: 1.25rem;
}
section.search-section .col-buttons button {
  margin: 0 0.1em;
}
section.search-section .card-body {
  padding-top: 0;
}
section.search-section h3, section.search-section h4 {
  border-bottom: 1px solid #688fb8;
  margin: 0 0 1em 0;
}
section.search-section .search-form .card-header {
  padding-bottom: 0;
  margin-bottom: 0.25em;
}
section.search-section .search-form .row {
  background-color: #E4ECEF;
  border: 1px solid #688fb8;
  margin: 5px;
}

.nav-tabs {
  border: none;
}
.nav-tabs .nav-link {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

.tab-content {
  border: 1px solid var(--tab-border);
  padding: 1em;
}
.tab-content td input[type=checkbox] {
  display: inline-block !important;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
  /* Centramos dentro de la celda sin romper la tabla */
  margin: 0 auto;
  vertical-align: middle;
}

/* Variante del Tooltip compartido (iTUC.UI.Components) que usa KeyValueTooltip: la tabla de
   pares clave/valor ocupa todo el globo, sin el relleno propio del contenido. */
.ituc-tooltip.key-value td {
  border: none;
}
.ituc-tooltip.key-value tr {
  border-bottom: 1px solid var(--white);
}
.ituc-tooltip.key-value .ituc-tooltip-content {
  padding: 0;
}

/****************************************************/
/*                     Paginas                      */
/****************************************************/
body.account {
  background-color: var(--login-bg);
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}
body.account section.account {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
}
body.account section.account .section-header a {
  display: block;
  transform: scale(1.2);
}
body.account section.account .section-header img {
  width: 100%;
  height: auto;
  z-index: 1000;
  margin: 2em 0;
}
body.account section.account {
  /* Sin margen inferior: el de AdminLTE dejaba una franja blanca bajo la tarjeta. */
}
body.account section.account .card {
  box-shadow: none;
  margin-bottom: 0;
}
body.account section.account a {
  color: var(--login-link-color);
}
body.account section.account .custom-control-label {
  font-weight: normal;
}
body.account {
  /* Enlace y casilla a la izquierda, botón de entrar a la derecha centrado con ellos. */
}
body.account .login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
body.account .btn-login {
  flex: 0 0 auto;
  min-width: 7rem;
  min-height: 44px;
  font-weight: 600;
  background-color: var(--login-button-bg);
  border-color: var(--login-button-bg);
  color: var(--login-button-text-color);
}
body.account .btn-login:hover, body.account .btn-login:focus {
  background-color: var(--login-button-hover-bg);
  border-color: var(--login-button-hover-bg);
  color: var(--login-button-text-color);
}

.login-box .brand-link img {
  height: 150px;
  width: auto;
}

body {
  font-family: var(--font-family-sans-serif);
  font-size: 0.9em;
}

/* Estilos personalizados para la plantilla */
/* Añadir regla !important cuando sea modificación sobre plantilla bootstrap original  */
/* Recomendable indicar el div para actuar sobre un elemento concreto */
/* BOTONES: Necesario añadir nuevas clases al fichero Buttons.cs */
/* Estilos personalizados para la plantilla */
/* Añadir regla !important cuando sea modificación sobre plantilla bootstrap original  */
/* Recomendable indicar el div para actuar sobre un elemento concreto */
/* BOTONES: Necesario añadir nuevas clases al fichero Buttons.cs */
imgfondo {
  background-image: url("../img/blur-close-up-connection-1624895-1.jpg");
  background-size: cover;
}

/* Pantalla login */
.login-pie {
  padding: 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 45px;
}

/* Colocamos la opción de buscar abajo del menú lateral */
#buscar {
  position: absolute;
  bottom: 0;
  padding-top: 5px;
  border-top: 1px solid white;
}

/* Fin Menú lateral */
/* **************** */
/* borde superior de los formularios */
.borde-superior {
  border-top: 4px solid #0dcaf0 !important;
}

.borde-superior2 {
  border-top: 4px solid #343a40 !important; /* dark */
}

.borde-superior3 {
  border-top: 4px solid #00ff21 !important; /* verde */
}

.borde-superior4 {
  border-top: 4px solid #FFA500 !important; /* naranja */
}

/* Opciones para el Grid */
/* Color personalizado para los botones de menú y cabecera del Grid */
#idDivGridSearch thead {
  color: black;
}

#idDivGridSearch .btn-grid {
  background-color: #EAECEE !important;
  border: 1px solid #343a40;
  color: #343a40 !important;
}

#idDivGridSearch .btn-grid:hover {
  background-color: var(--ituc2_hover) !important;
  color: white !important;
}

#idDivGridSearch tr:hover {
  background-color: var(--secondary) !important;
  color: white;
  cursor: pointer;
}

/* Opciones para la gestión del menú */
#Menu .header {
  color: white !important;
  font-size: 1.1rem;
  font-weight: bold;
}

#Menu .link {
  color: #343a40 !important;
  font-size: 1rem;
  font-weight: bold;
}

#Menu .tree {
  color: #343a40 !important;
  font-size: 0.9rem;
}

#tree .row:hover {
  background-color: #fcfcfc !important;
  color: white !important;
  cursor: pointer;
}

h6 a:hover {
  text-decoration: none !important;
  color: red !important;
  cursor: move;
}

.btn-gridoperacion {
  background-color: transparent !important;
  color: black;
}

.capa-draggable {
  width: 200px;
  background-color: #3498db;
  color: #fff;
  position: absolute;
  cursor: grab;
}

.ResultsArchetypedDataCharts {
  width: 100%;
  background-color: #f0f0f0; /* Color de fondo para visualización */
  border: 1px solid #ccc; /* Borde para visualización */
}

.amchartdiv {
  width: 100%;
  height: 300px;
}

/*INI VMM 2024-05-13 Cambio de forma de cursor en paginacion para Objetos */
.custom-link {
  color: blue;
  text-decoration: underline;
  cursor: default; /* Default cursor style */
}

.custom-link-off {
  color: grey;
  cursor: default; /* Default cursor style */
}

.flex-container { /*VMM 2024-05-15 Para alinear a la derecha la input de busqueda en pantalla de perfiles*/
  display: flex;
  justify-content: flex-end;
}

/*FIN VMM 2024-05-13 Cambio de forma de cursor en paginacion para Objetos */
/*/INI VMM 2024-010-01 Bloqueo para divs de informacion extendida de un IDCAMPO de una entidad*/
.bloqueado {
  pointer-events: none; /* Deshabilita clicks e interacciones */
  opacity: 0.7; /* Cambia la opacidad para parecer deshabilitado */
}

/*FIN VMM 2024-010-01 Bloqueo para divs de informacion extendida de un IDCAMPO de una entidad*/
/*INI VMM 2024-10-07 Ajustar el modal de los reports al contenido para que no quede todo muy apretado*/
.reports-modal-size {
  width: 75% !important; /* Ajusta el tamaño del modal */
  max-width: none !important; /* Desactiva límites máximos predefinidos */
}

/*FIN VMM 2024-10-07 Ajustar el modal de los reports al contenido para que no quede todo muy apretado*/
/*VMM 2024-10-15 Centrar en la pestaña de informes-reports*/
informes_reports {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

/*INI VMM 2024-10-30 Para uso de listas especiales de la pagina de prferencias*/
.fixed-dropdown {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  max-height: 400px; /* Altura máxima para scroll */
  overflow-y: auto; /* Scroll vertical si es necesario */
  width: 400px; /* Ancho fijo */
  height: 500px; /* Alto fijo */
  /*padding: 0.375rem 0.75rem;*/ /* Ajuste de padding para centrar texto */
}

.selected-options {
  margin-bottom: 10px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
}

.option-item input[type=checkbox] {
  margin-right: 10px;
}

.fixed-dropdown.bg-primary {
  background-color: #ffffff !important; /* Blanco */
  color: #000 !important;
  text-transform: uppercase !important; /* Convertir a mayúsculas (opcional) */
  font-weight: normal !important; /* Quitar la negrita */
  font-size: 14px !important;
}

.titulo_preferencias { /*VMM 2024-12-16 Titulo en pantalla de Preferencias*/
  font-weight: bold;
  color: black;
  font-size: 20px;
  background-color: #E4ECEF;
  border: 1px solid #688fb8;
  margin: 5px;
}

/*INI VMM 2025-01-21 Pantalla de Contenidos/TVs para listas dual*/
.dual-listbox-container {
  display: flex;
  justify-content: space-between;
}

.list-container {
  width: 45%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-y: auto;
  max-height: 500px;
}

.list-container h5 {
  text-align: center;
}

.list-header, .list-item {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.list-header {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

.list-item {
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.list-item:hover {
  background-color: #f9f9f9;
}

.list-item.selected {
  background-color: #007bff;
  color: white;
}

.list-item span, .list-header span {
  flex: 1;
  text-align: center;
}

.list-item span:first-child, .list-header span:first-child {
  text-align: left;
}

.list-item span:last-child, .list-header span:last-child {
  text-align: right;
}

/*FIN VMM 2025-01-21 Pantalla de Contenidos/TVs para listas dual*/
/*INI VMM 2025-02-14 ajuste de cards para treeview en busquedas*/
/*.card-treeview {*/
/*justify-content: flex-start; /* Alinea los elementos a la izquierda */
/*align-items: center; /* Opcional: Alinea verticalmente al centro */
/*margin-left: 0 !important; /* Alinea la card a la izquierda */
/*    margin-right: auto;
    margin-left: auto;*/
/*margin: 0 !important;
}*/
.container-treeview {
  margin-left: 10px !important;
}

.card-body-treeview {
  flex: 0 0 auto;
  padding: 0.3rem;
}

.jsgrid-treeview-colapse {
  border: 0px;
  background-color: transparent; /* Fondo transparente */
}

/*FIN VMM 2025-02-14 ajuste de cards para treeview en busquedas*/
.alignedSuperpuestoTitleCensus {
  position: absolute;
  top: -12px;
  left: 12px;
  background-color: #ffffff;
  padding: 0 12px;
  border: 1px solid #688fb8;
  border-radius: 4px;
  font-weight: bold !important;
  /*color: #0dcaf0;*/
  color: #0062cc !important;
}

/*INI VMM 2025-07-24 Para indicadores de orden en duallistboxes de contenidos*/
.sortable {
  cursor: pointer;
  user-select: none;
}

.sorted-asc::after {
  content: " ▲";
  font-size: 0.8em;
}

.sorted-desc::after {
  content: " ▼";
  font-size: 0.8em;
}

/*FIN VMM 2025-07-24 Para indicadores de orden en duallistboxes de contenidos*/
/*INI VMM 2025-08-21 Censo, ajuste de campos generados en edicion para que no tengan tanta separacion entre ellos*/
/* 1) Quita cualquier margen que metan los helpers (mb-*, etc.) */
.compact-fields [class*=mb-] {
  margin-bottom: 0 !important;
}

/* 2) Compacta cada fila generada */
.compact-fields .row.align-items-center {
  --bs-gutter-y: 0; /* sin gutter vertical */
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* la separación la daremos con gap */
}

/* 3) Quita padding vertical en columnas para que no “crezca” la fila */
.compact-fields .row.align-items-center > [class^=col-],
.compact-fields .row.align-items-center > [class*=" col-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Asegura label e input compactos */
.compact-fields .col-form-label {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2;
}

.compact-fields input.form-control {
  margin: 0 !important;
}

/* 5) Por si el helper mete <br> para espaciar */
.compact-fields br {
  display: none !important;
}

/* 6) Define tú el espacio entre filas (ajusta a gusto) */
.compact-fields {
  display: flex;
  flex-direction: column;
  gap: 0rem !important; /* ⇽ separación final entre un campo y otro */
}

/*FIN VMM 2025-08-21 Censo, ajuste de campos generados en edicion para que no tengan tanta separacion entre ellos*/
/*INI 2026-07-23 SectionCard (ViewComponent cshtml) para la vista especial de Procesos MONCONT (TFS 11257)*/
.section-card-cshtml {
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  margin-bottom: 1rem;
  background-color: #E4ECEF;
}

.section-icon {
  width: 70px;
  min-width: 70px;
  background: rgba(0, 0, 0, 0.03);
  border-right: 1px solid #e6e6e6;
}

.section-icon i {
  font-size: 28px;
  color: #4a6fa5;
}

.section-body {
  padding-top: 8px;
}

/*FIN 2026-07-23 SectionCard MONCONT*/

/*INICIO 2026-10-15 Autocompletado con filtro (FAutocomplete)*/

/* El desplegable sale del flujo. Sin esto empuja hacia abajo el resto del formulario
   cada vez que se teclea, y dentro de un modal eso descoloca los botones. El
   contenedor ya trae position-relative desde el propio componente. */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1056; /* por encima del contenido de un modal de Bootstrap */
  max-height: 16rem;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.autocomplete-item {
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

.autocomplete-item:hover {
  background-color: #e9ecef;
}

/* Un contenedor con overflow recorta el desplegable, que vive en position:absolute.
   Pasa dentro de las tablas: .table-responsive pone overflow-x:auto y el navegador
   convierte entonces el overflow-y en auto tambien —no admite un eje visible y el otro
   no—, asi que la lista se corta por abajo y aparece una barra vertical.

   Mientras haya una lista abierta dentro, el contenedor deja de recortar. La clase la pone
   el propio editor, que es quien sabe si hay alguna abierta, y no una regla :has(): aquella
   pide Chrome o Edge 105 en adelante, y asi funciona en cualquier navegador que ejecute
   Blazor. Solo mientras esta abierta, porque dejarlo siempre visible haria que una tabla
   ancha se saliera del modal. */
.table-responsive.autocomplete-open {
  overflow: visible;
}

/*FIN 2026-10-15 Autocompletado con filtro (FAutocomplete)*/