/* ================================================= */
/* === ESTILOS UNIFICADOS PARA MODAL DE SELECCIÓN === */
/* ================================================= */

.modal-overlay-custom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none; /* <-- CLAVE: Oculto por defecto */
  justify-content: center;
  align-items: center;
  z-index: 1050;
  opacity: 0; /* <-- CLAVE: Transparente por defecto */
  transition: opacity 0.3s ease;
}

.modal-overlay-custom.active {
  display: flex; /* <-- Lo hacemos visible con flex */
  opacity: 1; /* <-- Y lo hacemos opaco */
}

.modal-content-custom {
  background-color: #ffffff;
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  height: 75vh;
  max-height: 75vh; /* Asegura que no exceda esta altura */
  /* min-height: 75vh; */ /* Puedes comentar o quitar min-height si sospechas que causa problemas
                               de encogimiento no deseado en algún contexto.
                               Si el objetivo es una altura ESTRICTAMENTE fija, mantenlo. */
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-overlay-custom.active .modal-content-custom {
  transform: scale(1);
}

.modal-title-custom {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  flex-shrink: 0;
  position: relative;
  padding-right: 60px; /* Make room for close button */
}

.modal-description-custom {
  font-size: 0.95em;
  color: #666;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* --- 1. Estilos para los Botones (con colores Bizuit) --- */
.modal-actions-custom {
  /* margin-top: auto; */ /* Comentamos esto temporalmente si causa problemas de alineación */
  /* O lo mantenemos si queremos que el bloque de botones esté al fondo */
  margin-top: 25px; /* Restablecemos un margen superior fijo como antes, si 'auto' interfiere */
  display: flex;
  justify-content: flex-end; /* <-- ESTA ES LA CLAVE para alinear los botones a la derecha */
  gap: 10px;
  flex-shrink: 0;
  padding-top: 15px;
  /* border-top: 1px solid #eee; */ /* Puedes quitar o mantener el borde superior */
}

.modal-actions-custom button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.modal-actions-custom .btn-primary {
  background-color: var(--bizuit-orange);
  color: white;
}

.modal-actions-custom .btn-primary:hover {
  background-color: var(--bizuit-orange-dark);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.modal-actions-custom .btn-secondary {
  background-color: #6c757d;
  color: white;
}

.modal-actions-custom .btn-secondary:hover {
  background-color: #5a6268;
}

/* --- 2. Estilos para el Filtro (Layout y Choices.js) --- */
.filter-container-custom {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.filter-container-custom label {
  margin-bottom: 0;
  font-weight: bold;
  color: #555;
  flex-shrink: 0;
}

.modal-overlay-custom .choices {
  flex-grow: 1;
}

#activity-selection-modal .choices__inner {
  /* <--- CAMBIO AQUÍ */
  background-color: #fff;
  border: 1px solid #b0b0b0 !important;

  border-radius: 5px !important;
  padding: 10px !important;
  min-height: 38px;
  font-size: 0.95em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
}

.modal-overlay-custom .choices.is-focused .choices__inner {
  border-color: var(--bizuit-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.25) !important;
}

.modal-overlay-custom .choices__list--multiple .choices__item {
  background-color: var(--bizuit-orange) !important;
  border: 1px solid var(--bizuit-orange-dark) !important;
  color: white !important;
  border-radius: 4px;
  font-size: 0.8em;
  padding: 3px 7px;
  margin: 2px;
}

.modal-overlay-custom .choices__input {
  background-color: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  flex-grow: 1;
  min-width: 150px;
  font-family: "Quicksand", sans-serif !important; /* <-- AÑADIDO: Cambiamos la fuente */
  font-size: 0.9em !important; /* <-- AÑADIDO: Ajustamos tamaño para que coincida */
}

.modal-overlay-custom .choices__button {
  margin-left: 8px !important;
  border-left: 1px solid var(--bizuit-orange-dark) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Im0yLjU5NCAxOS40MDQgMTYtMTYtLjcxLS43MS0xNiAxNnoiLz48cGF0aCBkPSJtMTguNTk0IDE5LjQwNC0xNi0xNiAuNzEtLjcxIDE2IDE2eiIvPjwvZz48L3N2Zz4=") !important;
  opacity: 0.75 !important;
}

.modal-overlay-custom .choices__button:hover {
  background-color: var(--bizuit-orange-dark) !important;
  opacity: 1 !important;
}

.choices-dropdown-bizuit-theme .choices__item--selectable.is-highlighted {
  background-color: var(--bizuit-orange-very-light) !important;
  color: var(--bizuit-text-primary) !important;
}

/* --- 3. Estilos para el Árbol de Actividades (con checkboxes Bizuit) --- */
/* --- AJUSTES PARA EL ÁRBOL DE ACTIVIDADES DENTRO DEL MODAL CON ALTURA FIJA --- */
.activity-tree {
  /* flex-grow: 1; */ /* Comentamos o quitamos flex-grow si queremos un control más manual de su altura */
  /* height: 75%; */ /* Esta altura era el 75% del contenedor padre, ahora lo ajustaremos */
  flex-shrink: 1; /* Permite que se encoja si es necesario */
  flex-basis: auto; /* Base para el cálculo de flex */
  min-height: 100px; /* Una altura mínima para que siempre sea visible */
  overflow-y: auto; /* Mantenemos el scroll vertical para el árbol si su contenido excede su espacio */
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  background-color: #f9f9f9;
  margin-bottom: 15px; /* Añadimos un poco de margen inferior si es necesario antes de los botones */
}

.activity-tree ul {
  list-style-type: none;
  padding-left: 25px;
}

.activity-tree li {
  margin: 8px 0;
}

.activity-tree li.process-root-node > label {
  font-weight: bold;
  font-size: 1.1em;
  color: #363636;
}

.activity-tree li.process-root-node > input[type="checkbox"] {
  transform: scale(1.2);
}

.activity-tree label {
  cursor: pointer;
  font-size: 1em;
  color: #444;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.activity-tree input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.activity-tree label::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
  background-color: white;
  /* transition: background-color 0.2s, border-color 0.2s; */
}

.activity-tree input[type="checkbox"]:checked + label::before {
  background-color: var(--bizuit-orange);
  border-color: var(--bizuit-orange-dark);
}

.activity-tree label::after {
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  top: 50%;
  width: 0.35em;
  height: 0.7em;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: translateY(-65%) rotate(45deg);
  opacity: 0;
  /* transition: opacity 0.2s; */
}

.activity-tree input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

.activity-tree input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.25);
}

.modal-title-custom,
.modal-description-custom,
.filter-container-custom {
  flex-shrink: 0; /* Estos elementos no deben encogerse */
}

/* Close button for activity selection modal */
.modal-title-custom .close-modal {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  font-size: 28px !important;
  color: #666 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-title-custom .close-modal:hover {
  color: #333 !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

.activity-tree {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  background-color: #f9f9f9;
  overflow-y: auto; /* Crucial para el scroll interno */

  /* === CAMBIO CLAVE PARA LA ALTURA === */
  flex-grow: 1; /* Permite que crezca para llenar el espacio vertical restante */
  min-height: 0; /* IMPORTANTE con flex-grow: 1 en un contenedor flex con
                           flex-direction: column. Permite que el elemento se encoja
                           más allá de su contenido intrínseco si es necesario, dando
                           a flex-grow más control sobre el espacio disponible. */
  margin-bottom: 15px; /* Espacio antes de los botones de acción */
}

.modal-actions-custom {
  margin-top: auto; /* Empuja los botones al fondo del modal si queda espacio */
  flex-shrink: 0; /* Evita que los botones se encojan */
  padding-top: 15px; /* Espacio sobre los botones */
  display: flex;
  justify-content: flex-end; /* Alinea los botones a la derecha */
  gap: 10px;
}

.activity-tree label {
  display: inline-flex;
  align-items: center;
  /* ... otros estilos del label ... */
}

.activity-icon {
  /* bpmn-font usa :before para mostrar el icono, así que el span actúa como contenedor */
  font-size: 1.2em; /* Ajusta el tamaño del icono si es necesario. La fuente es ~16px por defecto. */
  margin-right: 6px; /* Espacio entre el icono y el texto */
  line-height: 1; /* Para mejor alineación vertical */
  color: #555; /* Color por defecto para los iconos, puedes ajustarlo */
  /* width y height no son tan necesarios si es una fuente, pero puedes usarlos para alinear */
  /* width: 1.2em; */
  /* text-align: center; */
}

/* Opcional: si quieres un color específico para ciertos tipos */
.activity-icon.bpmn-icon-user-task {
  /* color: blue; */
}
.activity-icon.bpmn-icon-start-event-none {
  /* color: green; */
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  vertical-align: middle;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #28a745; /* verde, podés ajustar */
}
input:checked + .slider:before {
  transform: translateX(20px);
}
/* Etiqueta al lado */
.switch-label {
  margin-left: 8px;
  font-size: 0.95em;
  vertical-align: middle;
  color: #444;
}

/* === Toggle switch scoped al modal de selección === */
.modal-overlay-custom .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  vertical-align: middle;
}
.modal-overlay-custom .switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.modal-overlay-custom .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}
.modal-overlay-custom .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.modal-overlay-custom input:checked + .slider {
  background-color: #faa43a;
}
.modal-overlay-custom input:checked + .slider:before {
  transform: translateX(20px);
}
.modal-overlay-custom .switch-label {
  margin-left: 8px;
  font-size: 0.95em;
  vertical-align: middle;
  color: #444;
}
.choices__container .bpmn-icon,
.choices__list--dropdown .bpmn-icon,
.choices__list--multiple .bpmn-icon {
  font-family: "bpmnfont" !important;
  speak: none;
  /* en caso de que quieras ajustar el tamaño/margen: */
  line-height: 1;
  display: inline-block;
}