/* bizuit-custom-modals.css */

/* Read-only field styles */
.readonly-field,
input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.6;
}

[data-theme="dark"] .readonly-field,
[data-theme="dark"] input[readonly],
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
  background-color: #2a2a2a !important;
  color: #8b8b8b !important;
}

/* Disabled buttons in read-only mode */
button:disabled:not(.btn-cancel):not(.btn-close):not(.btn-secondary):not([data-action="close"]):not([data-action="cancel"]) {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Exception for cancel/close buttons - they should always look clickable */
.btn-cancel,
.btn-close,
.btn-secondary,
.btn-modal-cancel,
.btn-modal-close,
button[data-action="close"],
button[data-action="cancel"],
.btn-cancel:disabled,
.btn-close:disabled,
.btn-secondary:disabled,
.btn-modal-cancel:disabled,
.btn-modal-close:disabled,
button[data-action="close"]:disabled,
button[data-action="cancel"]:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Make sure disabled state doesn't show not-allowed cursor for these buttons */
.btn-cancel:disabled,
.btn-close:disabled,
.btn-secondary:disabled,
.btn-modal-cancel:disabled,
.btn-modal-close:disabled,
button[data-action="close"]:disabled,
button[data-action="cancel"]:disabled,
.btn-cancel:disabled:hover,
.btn-close:disabled:hover,
.btn-secondary:disabled:hover,
.btn-modal-cancel:disabled:hover,
.btn-modal-close:disabled:hover,
button[data-action="close"]:disabled:hover,
button[data-action="cancel"]:disabled:hover {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Global override for all close/cancel buttons regardless of location */
*[class*="btn-cancel"]:disabled,
*[class*="btn-close"]:disabled,
*[class*="btn-secondary"]:disabled,
button[title*="Cerrar"]:disabled,
button[title*="Cancelar"]:disabled,
button[title*="Close"]:disabled,
button[title*="Cancel"]:disabled {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Ultra-specific override for wizard cancel buttons */
.service-task-wizard .btn-cancel[disabled],
.email-wizard .btn-cancel[disabled],
.sql-wizard .btn-cancel[disabled],
.hl7-wizard .btn-cancel[disabled],
.rest-wizard .btn-cancel[disabled],
button.btn-cancel[disabled],
button.btn-close[disabled],
button.btn-secondary[disabled] {
  cursor: pointer !important;
  opacity: 1 !important;
  background-color: inherit !important;
  color: inherit !important;
}


/* Override any inherited disabled styles for cancel/close buttons */
button.btn-cancel,
button.btn-close,
button.btn-secondary,
.btn-cancel,
.btn-close,
.btn-secondary {
  cursor: pointer !important;
  opacity: 1 !important;
}

button.btn-cancel:disabled,
button.btn-close:disabled,
button.btn-secondary:disabled,
.btn-cancel:disabled,
.btn-close:disabled,
.btn-secondary:disabled {
  cursor: pointer !important;
  opacity: 1 !important;
  background-color: inherit !important;
  color: inherit !important;
  pointer-events: auto !important;
}

/* Specific modal footer cancel/close buttons */
.bizuit-modal-footer .btn-cancel,
.bizuit-modal-footer .btn-close,
.bizuit-modal-footer .btn-secondary,
.modal-footer .btn-cancel,
.modal-footer .btn-close,
.modal-footer .btn-secondary,
.bizuit-modal-footer .btn-cancel:disabled,
.bizuit-modal-footer .btn-close:disabled,
.bizuit-modal-footer .btn-secondary:disabled,
.modal-footer .btn-cancel:disabled,
.modal-footer .btn-close:disabled,
.modal-footer .btn-secondary:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* General Custom Modal Styles */
.custom-editor-modal .modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.custom-editor-modal .modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.custom-editor-modal .modal-content {
  background-color: var(--theme-bg-primary, #fff);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: "Quicksand", sans-serif; /* Asegurar Quicksand en el contenido del modal */
  overflow: hidden;
  color: var(--theme-text-primary, #343a40);
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
}

/* Dark theme for modals */
[data-theme="dark"] .custom-editor-modal .modal-content {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Dark theme for modal headers */
[data-theme="dark"] .custom-editor-modal h4 {
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-secondary);
  border-bottom-color: var(--theme-border-color);
}

/* Dark theme for modal sections */
[data-theme="dark"] .custom-editor-modal .config-section {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .config-section h4 {
  color: var(--theme-text-primary);
}

/* Dark theme for form controls */
[data-theme="dark"] .custom-editor-modal .form-control {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .form-control:focus {
  background-color: var(--theme-bg-secondary);
  border-color: var(--bizuit-orange);
  color: var(--theme-text-primary);
}

/* Dark theme for labels and text */
[data-theme="dark"] .custom-editor-modal label {
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .form-help {
  color: var(--theme-text-secondary);
}

/* Dark theme for buttons */
[data-theme="dark"] .custom-editor-modal .btn-secondary {
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .btn-secondary:hover {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-light);
}

/* Ancho y Alto Fijo para modales de Lista (Parámetros y Variables) */
#parametrosDelProcesoModal .modal-content,
#variablesDelProcesoModal .modal-content {
  width: 800px;
  max-width: 90vw;
  height: 70vh;
}

/* Z-index elevado para modales de parámetros y variables cuando se abren desde el editor de propiedades */
#parametrosDelProcesoModal,
#variablesDelProcesoModal {
  z-index: 10000 !important;
}

/* Margen lateral para el contenido del cuerpo del modal */
.custom-editor-modal .modal-content p {
  margin-left: 20px;
  margin-right: 20px;
}
#configuracionParametroModal .modal-content,
#configuracionVariableModal .modal-content {
  width: 800px;
  max-width: 90vw;
  height: 56vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Z-index elevado para modales de configuración cuando se abren desde el editor de propiedades */
#configuracionParametroModal,
#configuracionVariableModal {
  z-index: 10000 !important;
}

/* Override específico para el Constructor de Esquema XML */
#constructorEsquemaXMLModalShared .modal-content.modal-large {
  width: 800px !important;
  max-width: 90vw;
}

/* Z-index elevado para el constructor de esquema XML cuando se abre desde otros modales */
#constructorEsquemaXMLModalShared {
  z-index: 10001 !important;
}

/* Ajustes específicos para el contenido del Constructor de Esquema XML */
#constructorEsquemaXMLModalShared h4 {
  margin-bottom: 20px;
}

/* Ajustes para el contenedor del schema builder en modal más angosto */
#constructorEsquemaXMLModalShared .xml-schema-builder-container {
  gap: 8px;
  padding: 0 15px;
  margin-bottom: 15px;
}

#constructorEsquemaXMLModalShared .xml-schema-tree,
#constructorEsquemaXMLModalShared .xml-schema-preview {
  padding: 8px;
}

/* Ajustar distribución de paneles para modal de 800px */
#constructorEsquemaXMLModalShared .xml-schema-tree {
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
  box-sizing: border-box !important;
}

#constructorEsquemaXMLModalShared .xml-schema-preview {
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
  box-sizing: border-box !important;
  overflow-x: auto;
  word-wrap: break-word;
}

#constructorEsquemaXMLModalShared .xml-schema-preview pre {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Ajustar el modal-actions también */
#constructorEsquemaXMLModalShared .modal-actions {
  padding: 15px 20px;
}

.custom-editor-modal .modal-content.modal-large {
  /* Para modales como el de Filtro XML */
  width: 900px;
  height: auto;
  max-height: 90vh;
}

.custom-editor-modal h4 {
  text-align: left;
  margin: 0;
  padding: 20px;
  background-color: #f8f9fa;
  color: #333;
  font-size: 18px;
  font-family: "Quicksand", sans-serif;
  font-weight: normal;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
  line-height: 24px;
  position: relative !important;
  display: block !important;
  padding-right: 60px !important;
  min-height: 48px !important;
}

/* Close button for modals */
.custom-editor-modal .modal-close-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

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

/* Close button style - increased specificity */
.custom-editor-modal h4 .close-modal,
.custom-editor-modal h3 .close-modal,
.modal-content h3 .close-modal,
.modal-content h4 .close-modal,
h4 .close-modal,
h3 .close-modal,
.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: var(--theme-text-primary, #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; /* Increased z-index to ensure visibility */
  box-sizing: border-box !important;
  opacity: 1 !important; /* Ensure button is visible */
  visibility: visible !important; /* Ensure button is visible */
}


/* Ensure h3 and h4 in modals have relative positioning for close button */
.modal-content h3,
.modal-content h4,
.custom-editor-modal h3,
.custom-editor-modal h4 {
  position: relative !important;
  display: block !important; /* Ensure block display for proper close button positioning */
  padding-right: 60px !important; /* Ensure space for close button */
  min-height: 48px !important; /* Ensure minimum height */
}

/* Modal body wrapper */
.custom-editor-modal .modal-body {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Config sections like in wizard */
.custom-editor-modal .config-section {
  background-color: var(--theme-bg-secondary, #f8f9fa);
  border: 1px solid var(--theme-border-color, #e0e0e0);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.custom-editor-modal .config-section h4 {
  margin: 0 0 4px 0;
  color: var(--theme-text-primary, #495057);
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  background: none;
  border: none;
  display: block;
}

.custom-editor-modal .modal-table-container {
  overflow-y: auto;
  margin: 30px;
  border: 1px solid var(--theme-border-color, #ddd);
  border-radius: 4px;
  flex-grow: 1;
  min-height: 0;
  background-color: var(--theme-bg-primary, #fff);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* When inside modal-body wrapper */
.custom-editor-modal .modal-body .modal-table-container {
  margin: 0 0 20px 0;
}

/* Direct child adjustments when modal structure follows wizard pattern */
.custom-editor-modal .modal-content > h4 + .modal-table-container + .modal-actions {
  /* This targets modals without modal-body wrapper */
}

.custom-editor-modal .modal-content > h4 + .modal-body + .modal-actions .modal-table-container {
  /* This targets modals with proper modal-body wrapper */
  margin: 0;
}

.custom-editor-modal table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.custom-editor-modal th,
.custom-editor-modal td {
  border-bottom: 1px solid var(--theme-border-color, #ddd);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.9em;
  vertical-align: top; /* Alinear al tope */
  color: var(--theme-text-primary, #343a40);
  transition: border-color 0.3s ease, color 0.3s ease;
  /* word-wrap: break-word; Se maneja en .nombre-wrapper si es necesario */
}

/* Anchos de columna fijos */
.custom-editor-modal th.col-nombre {
  width: 25%;
}
.custom-editor-modal th.col-tipo {
  width: 20%;
}
.custom-editor-modal th.col-direccion {
  width: 10%;
}
.custom-editor-modal th.col-valor-desde {
  width: 15%;
}
.custom-editor-modal th.col-filtro {
  width: 8%;
  text-align: center;
}
.custom-editor-modal th.col-seguridad {
  width: 15%;
}
.custom-editor-modal th.col-acciones {
  width: 17%;
  text-align: center;
}

/* --- MODIFICACIÓN PARA TRUNCAR TEXTO EN LA CELDA NOMBRE --- */
.custom-editor-modal td.col-nombre-cell {
  /* El width es heredado por table-layout: fixed desde el th */
  white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
  overflow: hidden; /* Oculta el texto que desborda */
  text-overflow: ellipsis; /* Muestra "..." al final del texto truncado */
  /* max-width: 0; /* A veces necesario con table-layout: fixed para que ellipsis funcione, prueba si es necesario */
}
/* --- FIN DE MODIFICACIÓN PARA TRUNCAR TEXTO --- */

/* Celdas con contenido que puede necesitar truncamiento o manejo especial */

.nombre-wrapper {
  /* Wrapper para la celda de nombre */
  display: block;
  max-height: 3.6em; /* Aprox 3 líneas (line-height * 3) */
  line-height: 1.2em; /* Ajustar según la altura de línea deseada */
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word; /* Permitir que se rompa la palabra si es muy larga */
  /* Para un truncamiento a N líneas más robusto (soporte limitado): */
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 2; */ /* Mostrar 2 líneas */
  /* -webkit-box-orient: vertical; */
}

.custom-editor-modal td.cell-filtro,
.custom-editor-modal td.cell-acciones {
  text-align: center;
}

.custom-editor-modal th {
  background-color: var(--theme-bg-secondary, #f8f9fa);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: none;
  vertical-align: middle; /* Centrar verticalmente los headers */
  color: var(--theme-text-primary, #495057);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.custom-editor-modal tbody tr:hover {
  background-color: var(--theme-bg-tertiary, #f1f1f1);
}

.custom-editor-modal tbody tr {
  cursor: default; /* Cambiado de pointer a default ya que la edición es por botón */
}

.custom-editor-modal tbody tr.selected {
  background-color: var(--bizuit-orange-very-light, #fff3e0);
  color: var(--bizuit-text-primary, #343a40);
}

.custom-editor-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  flex-shrink: 0;
  margin: 0;
  margin-top: auto;
  box-sizing: border-box;
}

/* Button styles matching wizard */
.custom-editor-modal .modal-actions button,
.custom-editor-modal .btn-modal-confirm {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  font-family: "Quicksand", sans-serif;
}

.custom-editor-modal .modal-actions button.primary,
.custom-editor-modal .btn-modal-confirm.primary {
  background-color: #ff6f00;
  color: white;
}

.custom-editor-modal .modal-actions button.primary:hover,
.custom-editor-modal .btn-modal-confirm.primary:hover {
  background-color: #e65f00;
}

.custom-editor-modal .modal-actions button.secondary,
.custom-editor-modal .modal-actions .btn-modal-confirm.secondary,
.custom-editor-modal .modal-actions .btn-modal-cancel.secondary {
  background-color: #6c757d;
  color: white;
}

.custom-editor-modal .modal-actions button.secondary:hover,
.custom-editor-modal .modal-actions .btn-modal-confirm.secondary:hover,
.custom-editor-modal .modal-actions .btn-modal-cancel.secondary:hover {
  background-color: #5a6268;
}

.custom-editor-modal .modal-actions button:disabled:not(.btn-cancel):not(.btn-close):not(.btn-secondary):not([data-action="close"]):not([data-action="cancel"]) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Make sure modal actions cancel/close buttons are always clickable */
.custom-editor-modal .modal-actions .btn-cancel:disabled,
.custom-editor-modal .modal-actions .btn-close:disabled,
.custom-editor-modal .modal-actions .btn-secondary:disabled,
.custom-editor-modal .modal-actions button[data-action="close"]:disabled,
.custom-editor-modal .modal-actions button[data-action="cancel"]:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Config sections like SQL wizard */
.custom-editor-modal .config-section {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.custom-editor-modal .config-section:last-child {
  margin-bottom: 0;
}

.custom-editor-modal .config-section h4 {
  margin: 0 0 8px 0;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
  border-bottom: none;
  background: none;
  padding: 0 !important;
  line-height: 1.2;
  min-height: auto !important;
  padding-right: 0 !important;
}

/* Form groups with proper spacing */
.custom-editor-modal .form-group {
  margin-bottom: 15px;
}

.custom-editor-modal .form-group:last-child {
  margin-bottom: 0;
}

.custom-editor-modal .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #495057;
  font-weight: 500;
  font-size: 14px;
}

.custom-editor-modal .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  color: #495057;
  background-color: #fff;
  transition: border-color 0.15s ease-in-out;
}

.custom-editor-modal .form-control:focus {
  outline: none;
  border-color: #ff9f40;
  box-shadow: 0 0 0 0.2rem rgba(255, 159, 64, 0.25);
}

.custom-editor-modal .form-control[readonly] {
  background-color: #e9ecef;
  cursor: default;
}

.custom-editor-modal textarea.form-control {
  resize: vertical;
  min-height: 60px;
}

/* Radio group vertical layout */
.custom-editor-modal .radio-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Radio group horizontal layout */
.custom-editor-modal .radio-group-horizontal {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.custom-editor-modal .radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-editor-modal .radio-label input[type="radio"] {
  margin-right: 8px;
  cursor: pointer;
}

.custom-editor-modal .radio-label span {
  font-size: 14px;
  color: #495057;
}

/* Toggle switch styles matching SQL wizard */
.custom-editor-modal .toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-editor-modal .toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-right: 10px;
}

.custom-editor-modal .toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-editor-modal .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.custom-editor-modal .toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.custom-editor-modal .toggle-input:checked + .toggle-slider {
  background-color: var(--bizuit-orange, #ff6f00);
}

.custom-editor-modal .toggle-input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Modal body wrapper */
.custom-editor-modal .modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0; /* Important for flex overflow */
}

/* Specific styles for parameter/variable configuration modals */
#configuracionParametroModal .modal-body,
#configuracionVariableModal .modal-body {
  max-height: calc(750px - 64px - 60px); /* Total height - header - footer */
}

/* Form row for horizontal layout */
.custom-editor-modal .form-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.custom-editor-modal .form-row .form-group {
  margin-bottom: 0;
}

/* Filter row layout */
.custom-editor-modal .filter-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.custom-editor-modal .filter-column-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
}

.custom-editor-modal .filter-column-container label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* =============================================================================
   ADVANCED HTML EDITOR (RICH TEXT EDITOR) - Copied from SQL Wizard
   ============================================================================= */

.custom-editor-modal .advanced-html-editor-container {
  border: 1px solid #ced4da;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-editor-modal .advanced-toolbar {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  border-bottom: 1px solid #dee2e6;
  padding: 8px;
}

.custom-editor-modal .toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.custom-editor-modal .toolbar-row:last-child {
  margin-bottom: 0;
}

.custom-editor-modal .toolbar-btn {
  padding: 6px 10px;
  border: 1px solid #ced4da;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all 0.2s;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #333 !important;
  opacity: 1 !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.custom-editor-modal .toolbar-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-editor-modal .toolbar-btn:active {
  background: #dee2e6;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ensure buttons look enabled */
.custom-editor-modal .toolbar-btn:disabled:not(.btn-cancel):not(.btn-close):not(.btn-secondary):not([data-action="close"]):not([data-action="cancel"]) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toolbar cancel/close buttons should look clickable */
.custom-editor-modal .toolbar-btn.btn-cancel:disabled,
.custom-editor-modal .toolbar-btn.btn-close:disabled,
.custom-editor-modal .toolbar-btn.btn-secondary:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Force buttons to look enabled */
.custom-editor-modal .toolbar-btn {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.custom-editor-modal .toolbar-btn strong,
.custom-editor-modal .toolbar-btn em,
.custom-editor-modal .toolbar-btn u,
.custom-editor-modal .toolbar-btn s {
  color: inherit;
  opacity: 1;
  pointer-events: none;
}

/* Active state for toggle buttons */
.custom-editor-modal .toolbar-btn.active {
  background: #007bff;
  color: white;
  border-color: #0056b3;
}

.custom-editor-modal .toolbar-separator {
  color: #dee2e6;
  margin: 0 6px;
  font-size: 18px;
}

.custom-editor-modal .toolbar-select {
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: white;
  font-size: 13px;
  cursor: pointer;
  min-width: 100px;
  height: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ===== PARAMETERS AND VARIABLES SECTION STYLES ===== */
.parameters-variables-buttons {
  margin-top: 10px;
}

.parameters-variables-buttons .button-group {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.parameters-variables-buttons .btn-params-vars {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #ff6f00;
  border-radius: 6px;
  background: white;
  color: #ff6f00;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}

.parameters-variables-buttons .btn-params-vars:hover {
  background: #ff6f00;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);
}

.parameters-variables-buttons .btn-params-vars:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255, 111, 0, 0.3);
}

.parameters-variables-buttons .btn-params-vars:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
}

.parameters-variables-buttons .btn-params-vars:disabled:hover {
  transform: none;
  box-shadow: none;
  background: #f8f9fa;
  color: #6c757d;
}

.parameters-variables-buttons .btn-params-vars i {
  font-size: 16px;
}

.parameters-variables-buttons .section-help {
  margin-top: 8px;
  color: #6c757d;
  font-style: italic;
}

.parameters-variables-buttons .section-help small {
  font-size: 12px;
  line-height: 1.4;
}

.custom-editor-modal .toolbar-select:hover {
  border-color: #adb5bd;
}

.custom-editor-modal .toolbar-select:focus {
  outline: none;
  border-color: #ff9f40;
  box-shadow: 0 0 0 2px rgba(255, 159, 64, 0.25);
}

/* Color picker styles */
.custom-editor-modal .color-picker-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.custom-editor-modal .color-text-btn, 
.custom-editor-modal .color-bg-btn {
  min-width: 35px !important;
  font-weight: bold;
  padding: 6px 8px !important;
}

.custom-editor-modal .color-text-btn {
  color: #000;
  border-bottom: 3px solid #000000;
  background: white;
}

.custom-editor-modal .color-bg-btn {
  color: #000;
  background: linear-gradient(to bottom, white 65%, #ffff00 65%);
  border-bottom: 3px solid #ffff00;
}

.custom-editor-modal .color-picker-input {
  width: 32px;
  height: 32px;
  border: 2px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.custom-editor-modal .color-picker-input:hover {
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-editor-modal .color-picker-input::-webkit-color-swatch-wrapper {
  padding: 2px;
  border: none;
  border-radius: 2px;
}

.custom-editor-modal .color-picker-input::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

/* Firefox */
.custom-editor-modal .color-picker-input::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

.custom-editor-modal .color-text-btn:hover, 
.custom-editor-modal .color-bg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Advanced HTML Editor Content Area */
.custom-editor-modal .advanced-html-editor {
  min-height: 100px;
  max-height: 150px;
  overflow-y: auto;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  background: white;
  font-family: 'Quicksand', sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.custom-editor-modal .advanced-html-editor:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 159, 64, 0.25);
}

/* Content styling within the editor */
.custom-editor-modal .advanced-html-editor h1,
.custom-editor-modal .advanced-html-editor h2,
.custom-editor-modal .advanced-html-editor h3,
.custom-editor-modal .advanced-html-editor h4,
.custom-editor-modal .advanced-html-editor h5,
.custom-editor-modal .advanced-html-editor h6 {
  margin: 15px 0 10px 0;
  font-weight: bold;
  line-height: 1.3;
}

.custom-editor-modal .advanced-html-editor h1 { font-size: 28px; color: #2c3e50; }
.custom-editor-modal .advanced-html-editor h2 { font-size: 24px; color: #34495e; }
.custom-editor-modal .advanced-html-editor h3 { font-size: 20px; color: #34495e; }
.custom-editor-modal .advanced-html-editor h4 { font-size: 18px; color: #34495e; }
.custom-editor-modal .advanced-html-editor h5 { font-size: 16px; color: #34495e; }
.custom-editor-modal .advanced-html-editor h6 { font-size: 14px; color: #34495e; }

.custom-editor-modal .advanced-html-editor p {
  margin: 10px 0;
  text-align: justify;
}

.custom-editor-modal .advanced-html-editor ul,
.custom-editor-modal .advanced-html-editor ol {
  margin: 10px 0;
  padding-left: 25px;
}

.custom-editor-modal .advanced-html-editor blockquote {
  margin: 15px 0;
  padding: 10px 20px;
  border-left: 4px solid #007bff;
  background: #f8f9fa;
  font-style: italic;
  color: #6c757d;
}

.custom-editor-modal .advanced-html-editor pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  margin: 10px 0;
}

.custom-editor-modal .advanced-html-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 15px 0;
}

.custom-editor-modal .advanced-html-editor table,
.custom-editor-modal .advanced-html-editor th,
.custom-editor-modal .advanced-html-editor td {
  border: 1px solid #ddd;
}

.custom-editor-modal .advanced-html-editor th,
.custom-editor-modal .advanced-html-editor td {
  padding: 8px 12px;
  text-align: left;
}

.custom-editor-modal .advanced-html-editor th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.custom-editor-modal .advanced-html-editor tr:nth-child(even) {
  background-color: #f8f9fa;
}

.custom-editor-modal .advanced-html-editor a {
  color: #007bff;
  text-decoration: underline;
}

.custom-editor-modal .advanced-html-editor a:hover {
  color: #0056b3;
}

.custom-editor-modal .advanced-html-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

/* Placeholder text - removed */

/* Form Grid for Add/Edit Modals - DEPRECATED */
.custom-editor-modal .form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 15px;
  align-items: start;
  margin-bottom: 20px;
}

.custom-editor-modal .form-grid label {
  font-weight: 500;
  color: #495057;
  font-size: 14px;
  justify-self: end;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 8px;
}
.custom-editor-modal .form-grid .radio-group,
.custom-editor-modal .form-grid .param-escalar-fields-container,
.custom-editor-modal .form-grid #varEscalarFieldsContainer,
/* .custom-editor-modal .form-grid #varClaveContainer, */
/* .custom-editor-modal .form-grid #varConstanteContainer, */
.custom-editor-modal .form-grid #paramXmlFieldsContainer,
.custom-editor-modal .form-grid #varXmlFieldsContainer {
  display: contents;
}

.custom-editor-modal .form-grid #paramXmlFieldsContainer button,
.custom-editor-modal .form-grid #varXmlFieldsContainer button,
.custom-editor-modal
  .form-grid
  #varXmlFieldsContainer
  #varXmlDefaultContentContainer {
  grid-column: 2;
  justify-self: start;
  margin-bottom: 5px;
}
.custom-editor-modal .form-grid #varXmlDefaultContentContainer {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.custom-editor-modal .form-grid #varXmlDefaultContentContainer label {
  justify-self: start;
  margin-bottom: 5px;
}

.custom-editor-modal .form-grid input[type="text"],
.custom-editor-modal .form-grid select,
.custom-editor-modal .form-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-editor-modal .form-grid textarea {
  resize: vertical;
}

.custom-editor-modal .form-grid input[type="text"]:focus,
.custom-editor-modal .form-grid select:focus,
.custom-editor-modal .form-grid textarea:focus {
  border-color: #ff6f00;
  box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.1);
  outline: none;
}

.custom-editor-modal .form-grid .radio-group {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-self: start;
}
.custom-editor-modal .form-grid .radio-group input[type="radio"] {
  margin-right: 5px;
}
.custom-editor-modal .form-grid .radio-group label {
  font-weight: normal;
  justify-self: start;
}

/* XML Schema Builder Specific Styles (jsTree modal) */
.xml-schema-builder-container {
  display: flex;
  gap: 15px;
  min-height: 300px;
  max-height: 400px;
  margin-bottom: 20px;
  padding: 20px;
  padding-top: 0;
}

/* XML Viewer Mode - when showing only the preview */
#constructorEsquemaXMLModalShared .xml-schema-builder-container.xml-viewer-mode {
  gap: 0 !important;
  justify-content: center;
  /* Mantener el mismo padding que arriba y abajo, pero aplicarlo a los lados también */
  padding: 20px !important;
  padding-top: 0 !important;
}

#constructorEsquemaXMLModalShared .xml-schema-builder-container.xml-viewer-mode #xmlSchemaPreview {
  flex: 1 !important;
  margin: 0;
  max-width: 100% !important;
  width: 100% !important;
  /* El pre y code ya tienen su propio padding interno */
}

/* Estilos para botones de esquema - iconos solamente */
#btnCargarEsquemaParamDesdeArchivo,
#btnVerXmlParam,
#btnLimpiarEsquemaParam,
#btnCargarEsquemaVarDesdeArchivo,
#btnVerXmlVar,
#btnLimpiarEsquemaVar {
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
  margin-right: 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Hacer que Ver XML tenga el mismo estilo que Cargar Esquema */
#btnVerXmlParam,
#btnVerXmlVar {
  background-color: #fff3e0 !important;
  color: #ff6f00 !important;
  border: 1px solid #ffcc80 !important;
}

#btnVerXmlParam:hover,
#btnVerXmlVar:hover {
  background-color: #ffe0b2 !important;
  color: #e65100 !important;
  border-color: #ffab40 !important;
}

/* Contenedor de botones de esquema - alineación horizontal */
#paramXmlFieldsContainer .form-group,
#varXmlFieldsContainer .form-group {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#paramXmlFieldsContainer .form-group > button,
#varXmlFieldsContainer .form-group > button {
  margin-bottom: 0 !important;
}

/* Estilos específicos para botones de limpiar (eliminar) */
#btnLimpiarEsquemaParam,
#btnLimpiarEsquemaVar {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
}

#btnLimpiarEsquemaParam:hover,
#btnLimpiarEsquemaVar:hover {
  background-color: #f1b0b7 !important;
  color: #491217 !important;
  border-color: #e85e6c !important;
}

/* Asegurar que los tooltips de los botones de esquema funcionen */
#btnCargarEsquemaParamDesdeArchivo[title],
#btnVerXmlParam[title],
#btnLimpiarEsquemaParam[title],
#btnCargarEsquemaVarDesdeArchivo[title],
#btnVerXmlVar[title],
#btnLimpiarEsquemaVar[title] {
  position: relative !important;
  pointer-events: auto !important;
}

/* Tooltips básicos para botones de esquema - sin interferir con modales */
#btnCargarEsquemaParamDesdeArchivo,
#btnVerXmlParam,
#btnLimpiarEsquemaParam,
#btnCargarEsquemaVarDesdeArchivo,
#btnVerXmlVar,
#btnLimpiarEsquemaVar {
  position: relative;
}

/* Ocultar permanentemente los controles de archivo de esquema */
#paramUrlPredeterminadoContainer,
#varUrlPredeterminadoContainer,
#paramXmlFieldsContainer #paramUrlPredeterminadoContainer,
#varXmlFieldsContainer #varUrlPredeterminadoContainer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Forzar visibilidad de botones XML */
.xml-button-force-visible {
  display: inline-block !important;
  visibility: visible !important;
}

.xml-button-force-hidden {
  display: none !important;
  visibility: hidden !important;
}

.xml-schema-tree {
  width: 50%;
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  overflow: auto;
  background-color: #fdfdfd;
}

.xml-schema-tree ul {
  list-style-type: none;
  padding-left: 25px;
  margin: 0;
}
.xml-schema-tree li {
  cursor: default;
  list-style: none;
}

/* Node content wrapper */
.xml-schema-tree .node-content {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.xml-schema-tree .node-content:hover {
  background-color: rgba(255, 111, 0, 0.1);
}

.xml-schema-tree .node-content.selected-node {
  background-color: var(--bizuit-orange-very-light, #fff3e0);
}

/* Expand/collapse toggle */
.xml-schema-tree .tree-toggle {
  display: inline-block;
  width: 16px;
  text-align: center;
  cursor: pointer;
  color: #666;
  font-size: 12px;
  margin-right: 4px;
  transition: transform 0.2s;
}

.xml-schema-tree .tree-toggle:hover {
  color: var(--bizuit-orange, #ff6f00);
}

/* Hide children when collapsed */
.xml-schema-tree li:not(.expanded) > ul {
  display: none;
}

/* Indent for tree structure */
.xml-schema-tree ul ul {
  margin-left: 8px;
}
.xml-schema-tree .node-name {
  font-weight: 500;
}
.xml-schema-tree .node-type {
  font-size: 0.85em;
  color: #666;
  margin-left: 5px;
}
.xml-schema-tree .node-repeatable-item .node-content {
  margin-left: -12px;
}

.xml-schema-preview {
  width: 50%;
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  overflow: auto;
  background-color: #2d2d2d;
  color: #f0f0f0;
  position: relative;
}
.xml-schema-preview pre {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Editable XSD preview styles - minimal styling */
.xml-schema-preview pre code[contenteditable="true"] {
  outline: none;
  cursor: text;
  min-height: 100px;
  display: block;
  padding: 0;
  background-color: transparent;
  border: none;
}

/* Visual indicator removed - no longer needed */

/* Copy button for XML Schema */
.btn-copy-schema {
  position: sticky;
  top: 10px;
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #f0f0f0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-copy-schema:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-copy-schema:active {
  transform: translateY(1px);
}

.btn-copy-schema i {
  margin-right: 5px;
  pointer-events: none;
}

/* Tooltip for copy button */
.btn-copy-schema::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10001;
}

.btn-copy-schema:hover::before {
  opacity: 1;
}

/* Clean button for XML Schema */
.btn-clean-schema {
  position: sticky;
  top: 10px;
  float: right;
  margin-left: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background-color: rgba(255, 107, 53, 0.2);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: 4px;
  color: #ff6b35;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-clean-schema:hover {
  background-color: rgba(255, 107, 53, 0.3);
  border-color: rgba(255, 107, 53, 0.5);
  color: #ff8c5a;
}

.btn-clean-schema:active {
  transform: translateY(1px);
}

.btn-clean-schema i {
  pointer-events: none;
}

/* Tooltip for clean button */
.btn-clean-schema::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  transform: translateX(20%);
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10001;
}

.btn-clean-schema:hover::before {
  opacity: 1;
}

/* Success state for copy button */
.btn-copy-schema.copied {
  background-color: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
  color: #4caf50;
}

.btn-copy-schema.copied i::before {
  content: "\f00c"; /* fa-check icon */
}

/* Custom Context Menu */
.custom-context-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 5px 0;
  z-index: 10002;
  min-width: 200px;
}
.custom-context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-context-menu li {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9em;
}
.custom-context-menu li:hover {
  background-color: var(--bizuit-orange-very-light, #fff3e0);
}

/* Sub-modals for XML builder actions */
.custom-editor-sub-modal {
  z-index: 10002 !important;
}
.custom-editor-sub-modal .modal-content {
  min-width: 350px;
  max-width: 450px;
  max-height: none;
  height: auto;
}
.custom-editor-sub-modal .modal-content label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: 500;
}
.custom-editor-sub-modal .modal-content input[type="text"],
.custom-editor-sub-modal .modal-content input:not([type]),
.custom-editor-sub-modal .modal-content select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-family: "Quicksand", sans-serif;
}


.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.action-buttons button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin: 0 2px;
  color: var(--bizuit-secondary, #0056b3);
  flex-shrink: 0;
}
.action-buttons button:hover {
  color: var(--bizuit-orange);
}
.action-buttons .fa-trash-alt {
  color: #dc3545;
}
.action-buttons .fa-trash-alt:hover {
  color: #c82333;
}

.custom-editor-modal .action-buttons .fas,
.custom-editor-modal .action-buttons .far {
  font-size: 1em;
  line-height: 1;
}

/* Estilos para el modal de Filtro XML Detallado */
.xml-filter-config-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}
.xml-filter-schema-tree-view {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fdfdff;
  padding: 10px;
  overflow: auto;
  min-height: 300px;
  max-height: 400px;
}
.xml-filter-schema-tree-view h5,
.xml-filter-mappings h5 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: var(--bizuit-orange);
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}
.xml-filter-mappings {
  flex: 1.5;
}
#filtroXmlJsTree {
  height: calc(100% - 30px);
  font-size: 0.9em;
}
.jstree-default .jstree-themeicon-custom {
  background-image: none !important;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fa,
.jstree-default .jstree-node > .jstree-themeicon-custom.far,
.jstree-default .jstree-node > .jstree-themeicon-custom.fas {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
  color: #555;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.far {
  font-weight: 400;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fas.fa-sitemap {
  color: #795548;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fas.fa-code {
  color: #2196f3;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fas.fa-cubes {
  color: #ff9800;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fas.fa-list {
  color: #4caf50;
}
.jstree-default .jstree-node > .jstree-themeicon-custom.fas.fa-at {
  color: #9c27b0;
}

#filtroXmlConfigTableBody input[type="text"].form-control,
#filtroXmlConfigTableBody select.form-control {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.9em;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}
#filtroXmlConfigTableBody input[type="text"].form-control:focus,
#filtroXmlConfigTableBody select.form-control:focus {
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 0.2rem rgba(255, 111, 0, 0.25);
  outline: none;
}
#filtroXmlConfigTableBody input.xml-filter-nodepath[readonly] {
  background-color: #e9ecef;
  cursor: default;
}
#filtroXmlConfigTableBody .action-buttons button {
  padding: 3px 6px;
}

@keyframes rowHighlight {
  0%,
  100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--bizuit-orange-very-light, #fff3e0);
  }
}
tr.newly-added-filter-row td,
tr.existing-filter-row td {
  animation: rowHighlight 1.2s ease-in-out;
}

#filtroXmlSchemaPreviewContainer {
  width: 100%;
  font-family: monospace;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100px;
  max-height: 200px;
  overflow: auto;
  display: none;
}
#filtroXmlSchemaPreviewContainer pre,
#filtroXmlSchemaPreviewContainer code {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* --- Visual Toggle para tablas (readonly) --- */
.visual-toggle .fas {
  font-size: 1.2em;
  vertical-align: middle;
}
.visual-toggle .fa-check-circle.active {
  color: #28a745;
}
.visual-toggle .fa-times-circle.inactive {
  color: #dc3545;
}

/* --- Toggle Switch para formularios --- */
.toggle-switch-container {
  display: flex;
  align-items: center;
  justify-self: start;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: var(--bizuit-orange, #ff6f00);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--bizuit-orange, #ff6f00);
}
input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}
.slider.round {
  border-radius: 28px;
}
.slider.round:before {
  border-radius: 50%;
}

/* --- Mensaje para tablas vacías --- */
.no-data-message-container {
  border: 1px dashed #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  padding: 30px 10px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}
.no-data-message-container i.fas,
.no-data-message-container i.far {
  display: block;
  margin-left: auto;
  margin-right: auto;

  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

  /* MODIFICACIÓN: Aplicar tamaño directamente */
  font-size: 3em; /* Esto equivale al efecto de fa-3x */
  /* Si necesitas más grande, puedes probar 3.5em, 4em, etc. */
  /* Si quieres un tamaño específico en píxeles: font-size: 48px; (ajusta el valor) */

  color: #ccc; /* Mantener el color que tenías en el style inline */
  margin-bottom: 15px; /* Mantener el margen que tenías en el style inline */
}
/* Mostrar input/textarea/select readonly con fondo gris y cursor no-permitido */
.custom-editor-modal .form-grid input[readonly],
.custom-editor-modal .form-grid textarea[readonly],
.custom-editor-modal .form-grid select[readonly] {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  /* opcional: bordes más tenues */
  border-color: #dcdcdc;
}

/* --- SPRINT 1: INICIO - Estilos específicos para el Modal de Configuración de Columnas --- */
#configuracionColumnasModal .modal-content {
  /* Hereda .modal-large */
}

#configuracionColumnasModal .modal-table-container {
  /* Hereda .custom-editor-modal .modal-table-container */
}

/* Ajustes generales para la tabla de configuración de columnas */
#columnConfigTable th,
#columnConfigTable td {
  padding: 6px 8px;
  font-size: 0.9em; /* Ligeramente más grande para mejor legibilidad */
  vertical-align: middle;
  /* No height fija para td, permitir que el contenido defina la altura */
}

/* Elementos de formulario dentro de la tabla */
#columnConfigTable select,
#columnConfigTable input[type="text"],
#columnConfigTable input[type="checkbox"] {
  font-family: "Quicksand", sans-serif;
  font-size: 1em; /* Heredar de la celda (0.9em) */
  padding: 5px 6px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  vertical-align: middle;
}
#columnConfigTable input[type="checkbox"] {
  width: auto;
  margin: 0 auto;
  display: inline-block; /* Cambio para mejor alineación con vertical-align */
  vertical-align: middle;
}

/* Botones de acción dentro de la tabla */
#columnConfigTable .action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#columnConfigTable .action-buttons button,
#columnConfigTable .btn-edit-column-value,
#columnConfigTable .btn-configure-column-format {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  margin: 0 1px;
  color: var(--bizuit-secondary, #0056b3);
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}

#columnConfigTable .action-buttons button:hover,
#columnConfigTable .btn-edit-column-value:hover,
#columnConfigTable .btn-configure-column-format:hover {
  color: var(--bizuit-orange);
}

#columnConfigTable .btn-delete-column-row {
  color: #dc3545;
}
#columnConfigTable .btn-delete-column-row:hover {
  color: #c82333;
}

#columnConfigTable .btn-edit-column-value:disabled,
#columnConfigTable .btn-configure-column-format:disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* Anchos de las columnas (Revisados para asegurar que sumen 100% y dar espacio a acciones) */
#columnConfigTable th:nth-child(1),
#columnConfigTable td:nth-child(1) {
  width: 17%;
} /* Tipo */
#columnConfigTable th:nth-child(2),
#columnConfigTable td:nth-child(2) {
  width: 20%;
} /* Encabezado */
#columnConfigTable th:nth-child(3),
#columnConfigTable td:nth-child(3) {
  width: 25%;
} /* Valor */
#columnConfigTable th:nth-child(4),
#columnConfigTable td:nth-child(4) {
  width: 8%;
  text-align: center;
} /* Editar */
#columnConfigTable th:nth-child(5),
#columnConfigTable td:nth-child(5) {
  width: 8%;
  text-align: center;
} /* Evaluar */
#columnConfigTable th:nth-child(6),
#columnConfigTable td:nth-child(6) {
  width: 8%;
  text-align: center;
} /* Formato */
#columnConfigTable th:nth-child(7),
#columnConfigTable td:nth-child(7) {
  width: 14%;
  text-align: center;
} /* Acciones - Aumentado */

/* Inputs y Selects dentro de la tabla */
#columnConfigTable td input[type="text"].column-header-input:focus,
#columnConfigTable td select:focus {
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 1px rgba(255, 111, 0, 0.2);
}
#columnConfigTable td select {
  background-color: white;
}

/* Controles de ordenamiento y "Aplicar a todas" */
#configuracionColumnasModal #columnConfigSortBy,
#configuracionColumnasModal #columnConfigSortDirection {
  font-family: "Quicksand", sans-serif;
  padding: 5px 8px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 3px;
}
#configuracionColumnasModal #columnConfigSortBy:focus,
#configuracionColumnasModal #columnConfigSortDirection:focus {
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 1px rgba(255, 111, 0, 0.2);
  outline: none;
}
#configuracionColumnasModal .toggle-switch-container span {
  font-family: "Quicksand", sans-serif;
}

/* Sub-modal de formato de fecha */
#configurarFormatoFechaModal .modal-content {
}
#configurarFormatoFechaModal label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-family: "Quicksand", sans-serif;
}
#configurarFormatoFechaModal select,
#configurarFormatoFechaModal input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
  font-family: "Quicksand", sans-serif;
}
#customDateFormatContainer p {
  font-size: 0.85em;
  color: #666;
  margin-top: 3px;
  font-family: "Quicksand", sans-serif;
}

/* --- SPRINT 1: FIN - Estilos específicos --- */

/* --- INICIO: NUEVOS ESTILOS GENÉRICOS PARA MODALES DE CONFIGURACIÓN DE TAREAS --- */

.bizuit-modal .modal-overlay,
.bizuit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.bizuit-modal .modal-content,
.bizuit-modal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  font-family: "Quicksand", sans-serif;
  width: 800px;
  height: 75vh;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bizuit-modal .modal-header,
.bizuit-modal-header {
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.bizuit-modal .modal-header h3,
.bizuit-modal-header h3 {
  margin: 0;
  color: var(--bizuit-orange, #ff6f00);
  font-size: 1.5em;
  font-weight: 600;
}

.bizuit-modal .modal-body,
.bizuit-modal-body {
  padding: 25px;
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
}

.bizuit-modal .modal-footer,
.bizuit-modal-footer {
  padding: 15px 25px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Estilos genéricos para los botones del footer */
.bizuit-modal-footer .btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  font-family: "Quicksand", sans-serif;
}

.bizuit-modal-footer .btn-primary {
  background-color: var(--bizuit-orange, #ff6f00);
  color: white;
}
.bizuit-modal-footer .btn-primary:hover {
  background-color: var(--bizuit-orange-dark, #e65f00);
}

.bizuit-modal-footer .btn-default {
  background-color: #6c757d;
  color: white;
}
.bizuit-modal-footer .btn-default:hover {
  background-color: #5a6268;
}

/* Estilos para los formularios dentro del body */
.form-group {
  margin-bottom: 15px;
}

.form-group label,
.bizuit-modal-body label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.form-group .form-control,
.bizuit-modal-body .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 0.95em;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group .form-control:focus,
.bizuit-modal-body .form-control:focus {
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.2);
  outline: none;
}

.bizuit-modal-body textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Estilos para Radio y Checkbox personalizados */
.bizuit-modal-body .radio-inline,
.bizuit-modal-body .checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
  cursor: pointer;
}

.bizuit-modal-body input[type="radio"],
.bizuit-modal-body input[type="checkbox"] {
  margin-right: 8px;
  /* Podrías estilizarlos más si quieres, pero por ahora los dejamos nativos */
}

/* Separador visual para modales */
hr.divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 25px 0;
}
/* --- FIN: NUEVOS ESTILOS GENÉRICOS PARA MODALES --- */

/* --- INICIO: ESTILOS PARA LA TABLA DE PARÁMETROS DE SQL --- */
.bizuit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  table-layout: fixed; /* ¡Importante para que los anchos se respeten! */
}

.bizuit-table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
  color: #495057;
  white-space: nowrap;
}

/* Definición de anchos por posición de columna */
.bizuit-table th:nth-child(1) {
  width: 35%;
} /* Nombre Parámetro */
.bizuit-table th:nth-child(2) {
  width: auto;
} /* Valor Predeterminado (flexible) */
.bizuit-table th:nth-child(3) {
  width: 20%;
  text-align: center;
} /* Es Parámetro Salida */

.bizuit-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.bizuit-table tbody tr:hover {
  background-color: #f1f3f5;
}

.bizuit-table .form-control[readonly] {
  background-color: #e9ecef;
  cursor: default;
  border-color: #ced4da;
}

.bizuit-table .no-params-message {
  text-align: center;
  color: #868e96;
  font-style: italic;
  padding: 20px;
}

/* Contenedor para el checkbox personalizado */
.custom-checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

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

.custom-checkbox-container label {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: white;
  border: 2px solid #adb5bd;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0; /* Override default label margin */
}

.custom-checkbox-container input[type="checkbox"]:checked + label {
  background-color: var(--bizuit-orange, #ff6f00);
  border-color: var(--bizuit-orange, #ff6f00);
}

.custom-checkbox-container input[type="checkbox"]:focus + label {
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.3);
}

.custom-checkbox-container label::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox-container input[type="checkbox"]:checked + label::after {
  display: block;
}

/* --- FIN: ESTILOS PARA LA TABLA DE PARÁMETROS DE SQL --- */
/* --- INICIO: ESTILOS PARA EL EDITOR CODEMIRROR --- */

.cm-editor {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: "Courier New", Courier, monospace;
}

.cm-editor.cm-focused {
  outline: none;
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.2);
}

.sql-editor-container .cm-editor {
  min-height: 120px; /* Altura mínima similar al textarea anterior */
  max-height: 250px;
}

.cm-scroller {
  overflow: auto;
}

/* --- FIN: ESTILOS PARA EL EDITOR CODEMIRROR --- */

/* --- Estilos para el Modal de Condiciones y otros componentes de Bizuit --- */

/* Overlay oscuro para el fondo del modal */
.bizuit-modal-overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor principal del modal */
.bizuit-modal-content {
  background: white;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Modal grande para el editor de condiciones */
.bizuit-modal-content.large {
  max-width: 950px;
}

/* Encabezado del modal */
.bizuit-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e5e5e5;
}
.bizuit-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

/* Cuerpo del modal, con scroll si es necesario */
.bizuit-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

/* Pie del modal */
.bizuit-modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e5e5e5;
  text-align: right;
}

.bizuit-modal-footer .btn + .btn {
  margin-left: 10px;
}

/* Estilos específicos para el editor de condiciones */
.logical-operator {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.logical-operator label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  cursor: pointer;
}

.condition-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.condition-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 10px;
  align-items: start; /* Alinea al inicio para los sub-elementos */
}

.condition-operand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.comparator {
  width: auto;
  margin-top: 5px; /* Alineación visual con los inputs */
}

.add-condition-btn {
  margin-top: 15px;
  align-self: flex-start;
}

.remove-condition-btn {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  padding: 0;
  margin-top: 5px;
}
.remove-condition-btn:hover {
  background: #d32f2f;
}

/* Estilos genéricos para formularios dentro del modal */
.form-group {
  margin-bottom: 15px;
}

.form-control {
  box-sizing: border-box; /* Asegura que padding no afecte el ancho total */
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* SQL Results Table Styles */
.sql-results-container {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  /* Modern scrollbars for webkit browsers */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.sql-results-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sql-results-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.sql-results-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.sql-results-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.sql-results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: max-content;
}

.sql-results-table th {
  background: #ff6b35;
  color: white;
  font-weight: 600;
  padding: 0;
  text-align: left;
  border: none;
  position: sticky;
  top: 0;
  z-index: 10;
  min-width: 120px;
  width: 150px;
  max-width: 200px;
}

.sql-results-table .column-header {
  padding: 12px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.sql-results-table td {
  padding: 0;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  background: #fff;
  min-width: 120px;
  width: 150px;
  max-width: 200px;
}

.sql-results-table .cell-content {
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.4;
  color: #495057;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.sql-results-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.sql-results-table tbody tr:nth-child(even) td {
  background-color: #f8f9fa;
}

.sql-results-table tbody tr:hover {
  background-color: #e3f2fd !important;
}

.sql-results-table tbody tr:hover td {
  background-color: #e3f2fd !important;
}

.sql-results-table th:first-child,
.sql-results-table td:first-child {
  border-left: 1px solid #dee2e6;
}

.sql-results-table th:last-child,
.sql-results-table td:last-child {
  border-right: 1px solid #dee2e6;
}

.sql-results-table tbody tr:last-child td {
  border-bottom: 1px solid #dee2e6;
}

textarea.form-control {
  resize: vertical;
}

/* Data Mapper Styles - JointJS Demo Exact Replica */
.mapper-app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #F3F7F6;
  font-family: Sans-serif;
}

.mapper-canvas-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
  gap: 1px;
  background: #F3F7F6;
}

.mapper-canvas {
  position: relative;
  background: #F3F7F6;
  display: flex;
  flex-direction: column;
}

.mapper-canvas .joint-paper {
  margin: 0 auto;
  background: #F3F7F6 !important;
  border: none !important;
  overflow: auto !important;
  height: 100% !important;
}

/* Scrollbar styling to match JointJS demo */
.mapper-canvas .joint-paper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mapper-canvas .joint-paper::-webkit-scrollbar-track {
  background: #F3F7F6;
}

.mapper-canvas .joint-paper::-webkit-scrollbar-thumb {
  background: #EBEEF0;
  border-radius: 4px;
}

.mapper-canvas .joint-paper::-webkit-scrollbar-thumb:hover {
  background: #7C90A6;
}

/* Force scroll on content areas */
.mapper-canvas .joint-paper .joint-element {
  overflow: visible;
}

.mapper-canvas .joint-paper svg {
  overflow: auto !important;
}

/* Record item styling to match demo */
.joint-paper .record-item-available {
  text-decoration: underline;
}

/* Data Mapper Styles - Original */
.mapper-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mapper-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
  gap: 1px;
  background: #ddd;
}

.mapper-panel {
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  background: #f8f9fa;
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
}

.panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  color: #333;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Source Panel */
.source-panel .panel-header {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}

.source-box {
  border: 2px solid #4caf50;
  border-radius: 8px;
  margin-bottom: 8px;
  background: white;
}

.source-box .box-header {
  background: #4caf50;
  color: white;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 6px 6px 0 0;
}

.source-box .box-content {
  padding: 8px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}

/* Transform Panel */
.transform-panel .panel-header {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);
}

.add-transform-btn {
  background: #ff6b35;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.add-transform-btn:hover {
  background: #e55a2b;
}

.transform-canvas {
  min-height: 500px;
  background: #fafafa;
  border: 1px dashed #ccc;
  border-radius: 4px;
  position: relative;
}

/* Target Panel */
.target-panel .panel-header {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.target-section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin: 0 0 8px 0;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  border-left: 3px solid #2196f3;
}

.target-box {
  border-radius: 6px;
  margin-bottom: 8px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.parameter-box {
  border: 2px solid #ff9800;
}

.parameter-box .box-header {
  background: #ff9800;
  color: white;
}

.variable-box {
  border: 2px solid #2196f3;
}

.variable-box .box-header {
  background: #2196f3;
  color: white;
}

.box-header {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.box-header:hover {
  opacity: 0.9;
}

.box-collapse-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 12px;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.box-collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.box-title {
  font-weight: 600;
}

.box-type {
  font-size: 10px;
  opacity: 0.8;
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 3px;
}

.box-content {
  padding: 0 !important;
  height: 200px !important;
  max-height: 200px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  background: #fafafa !important;
  border-radius: 0 0 4px 4px;
  position: relative !important;
  border: 1px solid #ddd !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: height 0.3s ease, max-height 0.3s ease;
}

/* Collapsed state */
.target-box.collapsed .box-content {
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border-top: none !important;
}

.target-box.collapsed .box-header {
  border-radius: 4px !important;
}

/* Ensure JointJS paper elements can scroll and have proper height */
.box-content .joint-paper {
  height: auto !important;
  min-height: 200px !important;
  overflow: visible !important;
  position: relative !important;
}

/* Fix any potential interference from JointJS internal styles */
.box-content .joint-paper svg {
  overflow: visible !important;
}

/* Force scrollbar to always show for debugging */
.box-content::-webkit-scrollbar {
  width: 8px;
}

.box-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.box-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.box-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.mapper-toolbar .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
}

.mapper-toolbar .btn-sm:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* JointJS specific styles */
.joint-paper {
  border: 1px solid #e0e0e0;
}

.joint-paper .joint-cell {
  cursor: pointer;
}

.joint-paper .joint-cell:hover {
  filter: brightness(1.05);
}

.joint-paper .joint-link .connection {
  stroke: #3498db;
  stroke-width: 2;
}

.joint-paper .joint-link .connection:hover {
  stroke: #2980b9;
  stroke-width: 3;
}

.joint-paper .joint-link .marker-target {
  fill: #3498db;
}

.joint-paper .joint-port {
  cursor: crosshair;
}

.joint-paper .joint-port:hover {
  r: 8 !important;
}

/* Custom element styles */
.joint-element.mapper-source {
  /* Source elements styling */
}

.joint-element.mapper-target {
  /* Target elements styling */  
}

.joint-element.mapper-transform {
  /* Transform elements styling */
}

.joint-element.selected {
  filter: drop-shadow(0 0 8px #ff6b35);
}

/* Mapper modal specific adjustments */
.bizuit-modal-content .mapper-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bizuit-modal-content .mapper-paper-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  user-select: none;
}
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:hover {
  background-color: #286090;
  border-color: #204d74;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-secondary {
  color: #333;
  background-color: #f0f0f0;
  border-color: #ccc;
}
.btn-secondary:hover {
  background-color: #dcdcdc;
  border-color: #adadad;
}
/* Modal grande para el editor de condiciones */
.bizuit-modal-content.large {
  max-width: 950px;
}

/* --- INICIO DE LA NUEVA REGLA --- */
/* Estilo para modales anchos que ocupan más espacio en pantalla */
.bizuit-modal-content.modal-wide {
  width: 75vw; /* 75% del ancho de la ventana */
  max-width: 1400px; /* Un límite máximo para pantallas muy grandes */
}
/* Estilo para modales anchos que ocupan más espacio en pantalla */
.bizuit-modal-content.modal-large {
  width: 45vw; /* 45% del ancho de la ventana */
  max-width: 1280px; /* Un límite máximo para pantallas muy grandes */
}
/* --- FIN DE LA NUEVA REGLA --- */

/* ULTIMATE OVERRIDE FOR CANCEL/CLOSE BUTTONS - NUCLEAR OPTION! */
html body div * button.btn-cancel,
html body div * button.btn-close,
html body div * button.btn-secondary,
html body div * .btn-cancel,
html body div * .btn-close,
html body div * .btn-secondary {
  cursor: pointer !important;
  opacity: 1 !important;
}

html body div * button.btn-cancel:disabled,
html body div * button.btn-close:disabled,
html body div * button.btn-secondary:disabled,
html body div * .btn-cancel:disabled,
html body div * .btn-close:disabled,
html body div * .btn-secondary:disabled {
  cursor: pointer !important;
  opacity: 1 !important;
  background-color: inherit !important;
  color: inherit !important;
  pointer-events: auto !important;
}

/* Extra nuclear option - target any button containing cancel/close text */
html body div * button:disabled {
  cursor: default !important;
}

html body div * button.btn-cancel:disabled,
html body div * button.btn-close:disabled,
html body div * button.btn-secondary:disabled {
  cursor: pointer !important;
}

/* Force cursor using CSS custom property fallback */
html body * {
  --cancel-cursor: pointer;
}

html body .btn-cancel,
html body .btn-close,
html body .btn-secondary,
html body button.btn-cancel,
html body button.btn-close,
html body button.btn-secondary {
  cursor: var(--cancel-cursor) !important;
}

html body .btn-cancel:disabled,
html body .btn-close:disabled,
html body .btn-secondary:disabled,
html body button.btn-cancel:disabled,
html body button.btn-close:disabled,
html body button.btn-secondary:disabled {
  cursor: var(--cancel-cursor) !important;
}

/* Force pointer cursor class */
.force-pointer-cursor,
.force-pointer-cursor:disabled,
.force-pointer-cursor:hover,
.force-pointer-cursor:disabled:hover {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Apply to all cancel/close buttons with even higher specificity */
html body div div div button.btn-cancel:disabled,
html body div div div button.btn-close:disabled,
html body div div div button.btn-secondary:disabled {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Last resort - use attribute selector */
button[class*="btn-cancel"][disabled],
button[class*="btn-close"][disabled],
button[class*="btn-secondary"][disabled],
button[class*="btn-modal-cancel"][disabled],
button[class*="btn-modal-close"][disabled] {
  cursor: pointer !important;
  opacity: 1 !important;
}

/*
* ====================================================================
* INICIO: ESTILOS PARA EL EDITOR DE LÓGICA (CORRECCIÓN FINAL)
* ====================================================================
*/

#configuracionCondicionesModal .modal-content {
  width: 1000px;
  max-width: 95vw;
  height: auto;
  max-height: 85vh;
  background-color: #ffffff;
}
/* --- Cuerpo del modal de condiciones --- */
.bizuit-modal-body.conditions-modal-body {
  padding: 20px;
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  overflow: auto;
  flex-grow: 1;
  min-height: 0;
  display: flex; /* AÑADIDO */
  flex-direction: column; /* AÑADIDO */
}
/* --- Forzar estilos de Título y Botones con alta especificidad --- */
#configuracionCondicionesModal .modal-content h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--bizuit-orange, #ff6f00) !important;
  font-size: 1.4em;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  flex-shrink: 0;
}

#configuracionCondicionesModal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
  background-color: #ffffff;
}
/* Reutilizamos las clases de botones de los otros modales */
#configuracionCondicionesModal .modal-actions .btn-modal-cancel {
  background-color: #6c757d;
  color: white;
}
#configuracionCondicionesModal .modal-actions .btn-modal-cancel:hover {
  background-color: #5a6268;
}
#configuracionCondicionesModal .modal-actions .btn-modal-confirm.primary {
  background-color: var(--bizuit-orange, #ff6f00);
  color: white;
}
#configuracionCondicionesModal .modal-actions .btn-modal-confirm.primary:hover {
  background-color: var(--bizuit-orange-dark, #e65f00);
}

.conditions-modal-body {
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: auto;
  flex-grow: 1;
  min-height: 0;
}

/* Override para que GeneralInfoSection en condiciones tenga el mismo espaciado que en wizards */
.conditions-modal-body .basic-config .config-section {
  margin-bottom: 15px;
}

/* Margen para GeneralInfoSection fuera del contenedor en condiciones (mismo que modal-table-container) */
.conditions-editor-modal .config-section {
  margin: 20px 30px 0px 30px;
}

/* Margen para GeneralInfoSection en modales de parámetros y variables - igual que las demás config-section */
#configuracionParametroModal #parameter-general-info-container .config-section,
#configuracionVariableModal #variable-general-info-container .config-section {
  margin: 0 0 20px 0 !important;
}

/* Remover padding lateral del contenedor basic-config en modales de parámetros y variables */
#configuracionParametroModal #parameter-general-info-container.basic-config,
#configuracionVariableModal #variable-general-info-container.basic-config {
  padding: 0 !important;
}

/* Forzar espaciado reducido entre título y controles en modales de parámetros y variables - igual que wizard */
#configuracionParametroModal #parameter-general-info-container .config-section h4,
#configuracionVariableModal #variable-general-info-container .config-section h4 {
  margin: 0 0 4px 0 !important;
  margin-bottom: 4px !important;
  color: #495057 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: normal !important;
}

#configuracionParametroModal #parameter-general-info-container .config-section .form-group:first-of-type,
#configuracionVariableModal #variable-general-info-container .config-section .form-group:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#configuracionParametroModal #parameter-general-info-container .config-section h4 + .form-group,
#configuracionVariableModal #variable-general-info-container .config-section h4 + .form-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- Contenedor de un Grupo --- */
.condition-group-node {
  border: 1px solid #d1d9e6;
  border-radius: 6px;
  background-color: #f7f9fc; /* Fondo azul/gris muy pálido para los grupos */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0;
  display: flex;
  position: relative;
  margin-bottom: 10px;
}
.root-group {
  /* El grupo raíz no necesita este fondo si no es el placeholder */
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

/* Contenedor del estado vacío */
.root-group-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  color: #6c757d;
}
.root-group-empty p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em; /* Un poco más grande para el mensaje principal */
}

/* --- Botón para colapsar --- */
.btn-collapse-group {
  position: absolute;
  top: 15px;
  left: -10px;
  background-color: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #6c757d;
  padding: 0;
  transition: all 0.2s ease;
}
.btn-collapse-group:hover {
  background-color: var(--bizuit-orange-very-light);
  color: var(--bizuit-orange);
  transform: scale(1.1);
}
.btn-collapse-group .fas {
  font-size: 0.7em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* 'fas' (solid) icons require a weight of 900 */
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 0.7em;
}

/* --- Contenido del grupo (para colapsar) --- */
.condition-group-content {
  flex-grow: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.condition-group-node.collapsed .condition-group-content {
  display: none;
}
.condition-group-node.collapsed {
  padding: 15px;
  height: fit-content;
  align-items: center;
}
.condition-group-node.collapsed::after {
  content: "(Grupo colapsado)";
  color: #6c757d;
  font-style: italic;
  margin-left: 20px;
}

/* --- Fila de Condición --- */
.condition-row-node {
  display: grid;
  grid-template-columns: 1fr 220px 1fr 40px;
  gap: 15px;
  align-items: start;
  padding: 15px;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  background-color: #ffffff; /* Fondo blanco para las condiciones individuales */
  margin-bottom: 10px;
}

/* NUEVA REGLA: Quitar margen inferior de la última condición/subgrupo dentro de un grupo */
.condition-group-content > *:last-child:not(.group-actions-footer) {
  margin-bottom: 0;
}

/* --- Operador de Unión (Y/O) --- */
.join-operator-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  position: relative;
}
.join-operator-container::before,
.join-operator-container::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #e0e0e0;
}
.join-operator-select {
  margin: 0 15px;
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 15px;
  background-color: #fff;
  font-weight: 500;
  color: #007bff;
  cursor: pointer;
  font-size: 0.9em;
}
.join-operator-select:focus {
  outline-color: var(--bizuit-orange);
  box-shadow: 0 0 0 2px var(--bizuit-orange-very-light);
}

/* --- Pie de página de acciones de Grupo --- */
.group-actions-footer {
  padding-top: 15px;
  margin-top: 20px; /* Mantenemos el margen superior aumentado para separar del contenido */
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* MODIFIED: Estilo para los botones de acción con icono (Añadir Condición, Añadir Grupo) */
/* MODIFIED: Estilo para los botones de acción con icono (Añadir Condición, Añadir Grupo) */
.btn-group-action {
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  /* Aumentamos significativamente el padding horizontal para más ancho */
  padding: 8px 24px; /* Ejemplo: de 8px 16px a 8px 24px */
  font-weight: 600;
  font-family: "Quicksand", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Espacio entre icono y texto */
  font-size: 0.9em; /* Puedes ajustar esto si es necesario */
  line-height: 1.4;
  text-align: center;
  white-space: nowrap; /* Muy importante para que el texto no se divida en líneas */
}

/* MODIFIED: Hover state for .btn-group-action */
.btn-group-action:hover {
  background-color: #5a6268;
  color: white !important; /* Asegurar que el texto siga blanco en hover */
}

/* MODIFIED: Icon style within .btn-group-action */
.btn-group-action .fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 1em; /* Tamaño del icono relativo al font-size del botón */
  /* Color es heredado (blanco) */
}

/* --- Botón de Eliminar --- (No changes here, just for context) */
.btn-remove-node {
  background: transparent;
  border: none;
  color: #6c757d;
  width: 38px;
  height: 38px;
  align-self: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* --- Controles de Formulario --- */
.form-control {
  padding: 8px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: "Quicksand", sans-serif;
  font-size: 0.95em;
}
.form-control:focus {
  border-color: var(--bizuit-orange, #ff6f00);
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.2);
  outline: none;
}
.condition-row-node .btn-remove-node {
  align-self: flex-start;
}
.group-actions-footer .btn-remove-node {
  margin-left: auto;
}
.btn-remove-node:hover {
  color: #dc3545;
}
/* --- Estilo para el estado vacío del editor de condiciones (el placeholder gris) --- */
.condition-group-node.root-group-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  color: #6c757d;
  border: 1px dashed #cccccc;
  border-radius: 6px;
  background-color: #f7f7f7;
  min-height: 200px;
  /* margin-top: 15px; /* Comentado o ajustado si es necesario */

  /* --- MODIFICACIONES/ADICIONES PARA EXTENDER ANCHO Y ALTO --- */
  width: 100%; /* AÑADIDO (o MODIFICADO si ya existía una regla de width) */
  flex-grow: 1; /* AÑADIDO */
  box-sizing: border-box; /* AÑADIDO (o MODIFICADO si ya existía) para asegurar que el padding/border no sumen al width */
}

.root-group-empty i.fas {
  /* Para el ícono grande */
  /* font-size: 3em; Ya aplicado en el HTML con fa-3x */
  color: #ccc;
  margin-bottom: 20px; /* Aumentar margen */
}

.root-group-empty p {
  margin-top: 0;
  margin-bottom: 10px;
}
.root-group-empty p:last-of-type {
  /* El texto "Comience añadiendo un grupo" */
  margin-bottom: 20px;
  font-size: 0.95em; /* Ligeramente más pequeño */
  color: #888888;
}
.root-group-empty .btn-group-action {
  /* El botón ya tiene estilos, pero podrías querer centrarlo si hay solo uno */
  /* margin-left: auto; */
  /* margin-right: auto; */
}
.root-group-empty i.fas.fa-sitemap {
  display: inline-block;
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 3em !important;
  color: #cccccc !important; /* Color del icono, un gris más claro */
  margin-bottom: 20px !important;
}

/* Regla general por si acaso (más baja especificidad) */
.root-group-empty i.fas {
  font-size: 3em;
  color: #ccc;
  margin-bottom: 20px;
}
/*
* ====================================================================
* FIN: ESTILOS PARA EL EDITOR DE LÓGICA
* ====================================================================
*/
/* Asegurar que FontAwesome se aplique correctamente a los iconos de jsTree */
.jstree-xml-node-selector-dropdown .jstree-icon.jstree-themeicon {
  /* Asegurar que los pseudo-elementos hereden o tengan la familia de fuente correcta */
  font-family: "Font Awesome 5 Free", "FontAwesome"; /* Incluye ambos por si acaso */
  /* Font Awesome 5 Free abarca Solid, Regular, Brands si están cargados */
}

/* Específico para iconos FAS (Solid) dentro del dropdown */
.jstree-xml-node-selector-dropdown .jstree-icon.jstree-themeicon.fas {
  font-weight: 900 !important; /* Forzar el peso para iconos solid */
}

/* Específico para iconos FAR (Regular) dentro del dropdown (ya debería funcionar, pero por completitud) */
.jstree-xml-node-selector-dropdown .jstree-icon.jstree-themeicon.far {
  font-weight: 400 !important; /* Forzar el peso para iconos regular */
}

/* Toast messages */
/* Toast styles moved to bizuit-bpmn-editor.css to avoid conflicts */
/* The main editor toast should appear at the bottom center */

/* =============================================================================
   PROCESS CONFIG BUTTON STYLES (PARAMETERS & VARIABLES ONLY)
   ============================================================================= */
   
/* Apply wizard button styles specifically to Parameters and Variables buttons */
.btn-process-config {
  width: 100% !important;
  padding: 8px 16px !important;
  background: #ff6b35 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Quicksand", sans-serif !important;
}

.btn-process-config:hover {
  background: #e55a2b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3) !important;
}

.btn-process-config:active {
  background: #cc4e24 !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-process-config:focus {
  background: #e55a2b !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.25) !important;
  outline: none !important;
}

/* Estilos específicos para el modal de confirmación de guardado */
#saveConfirmModal .modal-content {
  width: 500px;
  max-width: 90vw;
  height: auto;
  min-height: 300px;
}

#saveConfirmModal p {
  padding: 30px 30px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #555;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

#saveConfirmModal #btnSaveUpdateVersion {
  background-color: #5DADE2 !important;
  color: white !important;
  border: 1px solid #5DADE2 !important;
}

#saveConfirmModal #btnSaveUpdateVersion:hover {
  background-color: #3498DB !important;
  border-color: #3498DB !important;
}

/* Agregar gap entre botones en el modal de guardado */
#saveConfirmModal .modal-actions {
  gap: 10px !important;
}

/* Usar tamaños estándar del sistema para botones del modal de guardado */
#saveConfirmModal #btnSaveUpdateVersion,
#saveConfirmModal #btnSaveNewVersion,
#saveConfirmModal #btnSaveCancel {
  font-size: 16px !important;
  padding: 10px 20px !important;
  text-align: center !important;
}

/* Los estilos se heredan de las variables CSS del sistema */

/* Role Selection Modal Styles */
#roleSelectionModal {
  z-index: 10000 !important; /* 
    Fix: Ensure role modal appears above loading overlay (z-index 9999)
    Issue: When opening BPMN files with missing roles, the role modal was appearing
    behind the loading overlay, causing the UI to freeze as users couldn't interact.
    Solution: Set higher z-index and hide loading overlay when modal is shown.
  */
}

#roleSelectionModal .modal-content {
  height: auto;
  max-height: 80vh;
}

#roleSelectionModal .modal-body {
  max-height: calc(80vh - 140px);
  overflow-y: auto;
}

#roleSelectionModal .role-checkbox {
  margin-right: 8px;
  cursor: pointer;
}

#roleSelectionModal .role-checkbox:checked {
  accent-color: var(--bizuit-orange);
}

#roleSelectionModal .btn-modal-secondary {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  font-family: "Quicksand", sans-serif;
}

#roleSelectionModal .btn-modal-secondary:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Estilo consistente para botones close-modal en modales de parámetros, variables, XML schema builder y conditions */
#parametrosDelProcesoModal .close-modal,
#variablesDelProcesoModal .close-modal,
#configuracionParametroModal .close-modal,
#configuracionVariableModal .close-modal,
#constructorEsquemaXMLModalShared .close-modal,
.bizuit-modal-content .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: var(--theme-text-primary, #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;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  transition: color 0.2s ease !important;
}


/* Estilos específicos para el modal de editor de condiciones */
.modal-content.conditions-editor-modal {
  width: 90vw !important;
  max-width: 1200px !important;
  height: 85vh !important;
  max-height: 800px !important;
}

/* Z-index mayor para modales de condiciones cuando se abren desde wizards */
.conditions-configuration-modal .bizuit-modal-overlay,
#temp-loop-conditions-editor-container .bizuit-modal-overlay,
.conditions-editor-modal-overlay {
  z-index: 10100 !important;
}

.conditions-configuration-modal .bizuit-modal-content,
#temp-loop-conditions-editor-container .bizuit-modal-content,
.conditions-editor-modal {
  z-index: 10101 !important;
}

/* Estilos específicos para el modal de editor general de elementos */
.modal-content.general-element-editor-modal {
  width: 900px !important;
  max-width: 95vw !important;
  height: 80vh !important;
  max-height: 80vh !important;
}

.general-element-editor-modal .modal-body {
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 20px;
}

.general-element-editor-modal h5 {
  margin: 0 0 10px 0;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
}

/* Header del editor general - igual que wizard */
.modal-content.general-element-editor-modal .wizard-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  background: #f8f9fa !important;
}

.modal-content.general-element-editor-modal .wizard-header h2,
.general-element-editor-modal .wizard-header h2,
.wizard-header h2 {
  margin: 0 !important;
  font-size: 32px !important;
  color: #333 !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: normal !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 0 !important;
  min-height: auto !important;
  position: static !important;
}

.modal-content.general-element-editor-modal .wizard-header .header-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.modal-content.general-element-editor-modal .wizard-header .close-button {
  background: none !important;
  border: none !important;
  font-size: 28px !important;
  color: var(--theme-text-primary, #666) !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Estilos específicos para el modal de agregar elementos XML */
#xmlBuilderAddElementModal .modal-content {
  width: 650px !important; /* 30% más ancho que el tamaño estándar ~500px */
  max-width: 90vw !important;
  min-height: 515px !important; /* 30% más alto que el tamaño estándar ~396px */
  height: auto !important;
}

/* Solo aplicar márgenes laterales a los elementos del formulario, NO al header ni footer */
#xmlBuilderAddElementModal .modal-content > label:not(.modal-actions):not(h4),
#xmlBuilderAddElementModal .modal-content > input,
#xmlBuilderAddElementModal .modal-content > select {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

/* Asegurar que header y footer NO tengan márgenes laterales */
#xmlBuilderAddElementModal .modal-content > h4,
#xmlBuilderAddElementModal .modal-content > .modal-actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#xmlBuilderAddElementModal .modal-content > label {
  margin-bottom: 8px !important;
  margin-top: 20px !important;
  display: block !important;
}

#xmlBuilderAddElementModal .modal-content > input,
#xmlBuilderAddElementModal .modal-content > select {
  margin-bottom: 20px !important;
  width: calc(100% - 60px) !important; /* Ancho completo menos los márgenes laterales */
  padding: 8px !important;
  box-sizing: border-box !important;
}

#xmlBuilderAddElementModal .modal-content > label:first-of-type {
  margin-top: 30px !important; /* Primer label con margen superior */
}

/* Cambiar borde azul por naranja en controles focus para modales XML Schema Builder */
#xmlBuilderAddElementModal input:focus,
#xmlBuilderAddElementModal select:focus,
#xmlBuilderAddComplexElementModal input:focus,
#xmlBuilderAddComplexElementModal select:focus,
#xmlBuilderAddCollectionElementModal input:focus,
#xmlBuilderAddCollectionElementModal select:focus {
  border-color: #ff6600 !important;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.2) !important;
  outline: none !important;
}

/* Botones de esquema XML y filtro XML en tono naranja suave */
#btnEstablecerEsquemaParam,
#btnCargarEsquemaParamDesdeArchivo,
#btnEstablecerEsquemaVar,
#btnCargarEsquemaVarDesdeArchivo,
#btnOpenXmlFilterConfigParam,
#btnOpenXmlFilterConfigVar {
  background-color: #fff3e0 !important;
  color: #ff6f00 !important;
  border: 1px solid #ffcc80 !important;
}

#btnEstablecerEsquemaParam:hover,
#btnCargarEsquemaParamDesdeArchivo:hover,
#btnEstablecerEsquemaVar:hover,
#btnCargarEsquemaVarDesdeArchivo:hover,
#btnOpenXmlFilterConfigParam:hover,
#btnOpenXmlFilterConfigVar:hover {
  background-color: #ffe0b2 !important;
  color: #e65100 !important;
  border-color: #ffab40 !important;
}

/* Estilos específicos para el modal de agregar elementos complejos XML */
#xmlBuilderAddComplexElementModal .modal-content {
  width: 650px !important; /* 30% más ancho que el tamaño estándar ~500px */
  max-width: 90vw !important;
  min-height: 515px !important; /* 30% más alto que el tamaño estándar ~396px */
  height: auto !important;
}

/* Solo aplicar márgenes laterales a los elementos del formulario, NO al header ni footer */
#xmlBuilderAddComplexElementModal .modal-content > label:not(.modal-actions):not(h4),
#xmlBuilderAddComplexElementModal .modal-content > input,
#xmlBuilderAddComplexElementModal .modal-content > select {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

/* Asegurar que header y footer NO tengan márgenes laterales */
#xmlBuilderAddComplexElementModal .modal-content > h4,
#xmlBuilderAddComplexElementModal .modal-content > .modal-actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#xmlBuilderAddComplexElementModal .modal-content > label {
  margin-bottom: 8px !important;
  margin-top: 20px !important;
  display: block !important;
}

#xmlBuilderAddComplexElementModal .modal-content > input,
#xmlBuilderAddComplexElementModal .modal-content > select {
  margin-bottom: 20px !important;
  width: calc(100% - 60px) !important; /* Ancho completo menos los márgenes laterales */
  padding: 8px !important;
  box-sizing: border-box !important;
}

#xmlBuilderAddComplexElementModal .modal-content > label:first-of-type {
  margin-top: 30px !important; /* Primer label con margen superior */
}

/* Estilos específicos para el modal de agregar colección de elementos XML */
#xmlBuilderAddCollectionElementModal .modal-content {
  width: 650px !important; /* 30% más ancho que el tamaño estándar ~500px */
  max-width: 90vw !important;
  min-height: 515px !important; /* 30% más alto que el tamaño estándar ~396px */
  height: auto !important;
}

/* Solo aplicar márgenes laterales a los elementos del formulario, NO al header ni footer */
#xmlBuilderAddCollectionElementModal .modal-content > label:not(.modal-actions):not(h4),
#xmlBuilderAddCollectionElementModal .modal-content > input,
#xmlBuilderAddCollectionElementModal .modal-content > select {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

/* Asegurar que header y footer NO tengan márgenes laterales */
#xmlBuilderAddCollectionElementModal .modal-content > h4,
#xmlBuilderAddCollectionElementModal .modal-content > .modal-actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#xmlBuilderAddCollectionElementModal .modal-content > label {
  margin-bottom: 8px !important;
  margin-top: 20px !important;
  display: block !important;
}

#xmlBuilderAddCollectionElementModal .modal-content > input,
#xmlBuilderAddCollectionElementModal .modal-content > select {
  margin-bottom: 20px !important;
  width: calc(100% - 60px) !important; /* Ancho completo menos los márgenes laterales */
  padding: 8px !important;
  box-sizing: border-box !important;
}

#xmlBuilderAddCollectionElementModal .modal-content > label:first-of-type {
  margin-top: 30px !important; /* Primer label con margen superior */
}

/* Estilos específicos para el modal de confirmación genérico (eliminar parámetros/variables) */
#genericConfirmModal .modal-content {
  width: 600px;
  max-width: 90vw;
  height: auto;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: visible; /* Override the base overflow: hidden */
  border-radius: 8px !important; /* Ensure rounded borders */
  background-color: var(--theme-bg-primary, #fff);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#genericConfirmModal h4 {
  flex-shrink: 0;
  margin: 0;
  padding: 20px;
  padding-right: 60px;
  background-color: #f8f9fa;
  color: #333;
  font-size: 20px;
  font-family: 'Quicksand', sans-serif;
  font-weight: normal;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

#genericConfirmModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 120px;
  max-height: calc(80vh - 180px); /* Leave space for header and buttons */
  padding: 0;
}

#genericConfirmModal p {
  padding: 40px 30px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #495057;
  white-space: pre-wrap; /* Preserve line breaks from \n */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

#genericConfirmModal .modal-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

/* Custom scrollbar for the modal body */
#genericConfirmModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

#genericConfirmModal .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#genericConfirmModal .modal-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

#genericConfirmModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Estilos específicos para divs de error dentro del modal de confirmación */
#genericConfirmModal p > div[style*="#f8d7da"] {
  margin: -16px -20px !important;
  padding: 12px 16px !important;
}

/* Z-index elevado para que el modal de confirmación aparezca sobre otros modales */
#genericConfirmModal {
  z-index: 10002 !important;
}

/* Estilos específicos para el modal de confirmación de eliminación XML */
#xmlBuilderConfirmModal .modal-content {
  width: 500px;
  max-width: 90vw;
  height: auto;
  min-height: 396px;
}

#xmlBuilderConfirmModal p {
  padding: 40px 30px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #555;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}



/* ============================================ */
/* === ESTILOS ESPECÍFICOS PARA MODAL DE ACTIVIDADES === */
/* ============================================ */

/* Mantener la funcionalidad específica del modal de actividades con las clases estándar */
#activity-selection-modal .modal-content {
  width: 90%;
  max-width: 800px;
  height: 85vh; /* Altura fija */
  min-height: 500px; /* Altura mínima para evitar que se vea mal */
  max-height: 900px; /* Altura máxima para pantallas muy grandes */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Contenedor interno para el contenido scrolleable */
#activity-selection-modal .modal-body {
  padding: 20px 30px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0; /* Importante para que flex funcione correctamente */
  display: flex;
  flex-direction: column;
}

#activity-selection-modal .modal-description-custom {
  font-size: 0.95em;
  color: #777;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* El header y footer del modal de actividades usan los estilos generales de .custom-editor-modal */

#activity-selection-modal .filter-container-custom {
  margin-bottom: 15px;
  width: 100%;
}

/* Asegurar que los selects ocupen todo el ancho */
#activity-selection-modal .filter-container-custom .choices {
  width: 100%;
}

#activity-selection-modal .filter-container-custom .choices__inner {
  width: 100%;
  box-sizing: border-box;
}

#activity-selection-modal .tree-selection-controls {
  text-align: left;
  margin-bottom: 1rem;
}

#activity-selection-modal .activity-tree {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  min-height: 200px;
  flex: 1; /* Tomar el espacio restante disponible */
  overflow-y: auto;
  margin-bottom: 0; /* Eliminar margin inferior para maximizar espacio */
  background-color: #fafafa;
}

/* Estilos para los filtros multiple select */
#activity-selection-modal .choices {
  margin-bottom: 10px;
  font-size: 14px;
  font-family: "Quicksand", sans-serif;
}

/* Asegurar que todos los elementos internos de Choices usen Quicksand */
#activity-selection-modal .choices__inner,
#activity-selection-modal .choices__list,
#activity-selection-modal .choices__item,
#activity-selection-modal .choices__placeholder,
#activity-selection-modal .choices__input {
  font-family: "Quicksand", sans-serif;
}

#activity-selection-modal .choices.is-focused .choices__inner {
  border-color: var(--bizuit-orange, #ff7b00);
  box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.2);
}

#activity-selection-modal .choices__list--multiple .choices__item {
  background-color: var(--bizuit-orange, #ff7b00);
  border: 1px solid var(--bizuit-orange, #ff7b00);
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  margin-right: 3px;
  margin-bottom: 3px;
}

#activity-selection-modal .choices__input {
  background-color: transparent;
  border: none;
  font-size: 14px;
  margin-bottom: 5px;
  padding: 2px;
  font-family: "Quicksand", sans-serif;
}

#activity-selection-modal .choices__button {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"%3e%3cpath d=\"m12.2 2.8-9.4 9.4M2.8 2.8l9.4 9.4\" stroke=\"%23fff\" stroke-width=\"2\" fill=\"none\" fill-rule=\"evenodd\"/%3e%3c/svg%3e");
  padding: 0;
  width: 14px;
  height: 14px;
  margin-left: 4px;
}

#activity-selection-modal .choices__button:hover {
  opacity: 0.7;
}

/* Estilos para el toggle switch */
#activity-selection-modal .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-right: 10px;
}

#activity-selection-modal .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#activity-selection-modal .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

#activity-selection-modal .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

#activity-selection-modal input:checked + .slider {
  background-color: var(--bizuit-orange, #ff7b00);
}

#activity-selection-modal input:checked + .slider:before {
  transform: translateX(26px);
}

#activity-selection-modal .switch-label {
  font-size: 14px;
  color: #555;
  vertical-align: middle;
}

/* === SERVICE TASK TYPE SELECTOR MODAL === */

.service-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  margin-top: 25px;
  justify-items: center;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.service-type-option {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  width: 100%;
  max-width: 240px;
  position: relative;
  overflow: hidden;
}

.service-type-option:hover {
  border-color: #ff6b35;
  background: #fff5f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
}

.service-type-option:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.service-type-icon {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25);
}

.service-type-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-type-content h5 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.2;
}

.service-type-content p {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #6c757d;
  font-family: 'Quicksand', sans-serif;
}

/* Special icon colors for each service type */
.service-type-option[data-type="email"] .service-type-icon {
  background: linear-gradient(135deg, #3498db 0%, #74b9ff 100%);
}

.service-type-option[data-type="rest"] .service-type-icon {
  background: linear-gradient(135deg, #2ecc71 0%, #55d19a 100%);
}

.service-type-option[data-type="sql"] .service-type-icon {
  background: linear-gradient(135deg, #9b59b6 0%, #bb7db8 100%);
}

.service-type-option[data-type="hl7"] .service-type-icon {
  background: linear-gradient(135deg, #e74c3c 0%, #fd79a8 100%);
}

/* Hover effects for different types */
.service-type-option[data-type="email"]:hover {
  border-color: #3498db;
  background: #f0f8ff;
}

.service-type-option[data-type="rest"]:hover {
  border-color: #2ecc71;
  background: #f0fff4;
}

.service-type-option[data-type="sql"]:hover {
  border-color: #9b59b6;
  background: #faf5ff;
}

.service-type-option[data-type="hl7"]:hover {
  border-color: #e74c3c;
  background: #fff5f5;
}

/* Responsive design */
@media (max-width: 600px) {
  .service-type-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 300px;
  }
  
  .service-type-option {
    padding: 15px;
    min-height: 70px;
    max-width: none;
  }
  
  .service-type-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  
  .service-type-content h5 {
    font-size: 14px;
  }
  
  .service-type-content p {
    font-size: 11px;
  }
}

/* Animation on modal open */
#serviceTaskTypeSelectorModal.active .service-type-option {
  animation: slideInUp 0.3s ease forwards;
  opacity: 0;
}

#serviceTaskTypeSelectorModal.active .service-type-option:nth-child(1) {
  animation-delay: 0.1s;
}

#serviceTaskTypeSelectorModal.active .service-type-option:nth-child(2) {
  animation-delay: 0.2s;
}

#serviceTaskTypeSelectorModal.active .service-type-option:nth-child(3) {
  animation-delay: 0.3s;
}

#serviceTaskTypeSelectorModal.active .service-type-option:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Service Task Type Selector Modal - Button styles to match other modals */
#serviceTaskTypeSelectorModal .modal-actions .btn-modal-cancel {
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  font-family: "Quicksand", sans-serif;
}

#serviceTaskTypeSelectorModal .modal-actions .btn-modal-cancel:hover {
  background-color: #5a6268;
}

/* === END SERVICE TASK TYPE SELECTOR MODAL === */

/* === XML SCHEMA BUILDER CONFIRM MODAL === */
/* Clean modal for XML schema node deletion with validation warnings */

.xml-schema-confirm-modal {
  width: 550px !important;
  max-width: 90vw !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: 70vh !important;
}

/* Ensure the XML confirm modal appears above other modals */
#xmlBuilderConfirmModal {
  z-index: 10003 !important;
}

.xml-schema-confirm-modal .modal-body {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.xml-confirmation-message {
  padding: 20px 30px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  color: #495057;
  white-space: pre-wrap; /* Preserve line breaks from \n */
  font-family: "Quicksand", sans-serif;
}

/* Clean button styling matching other modals */
.xml-schema-confirm-modal .btn-modal-confirm {
  background-color: #ff6f00;
  border-color: #ff6f00;
  color: white;
  font-weight: 500;
  min-width: 120px;
  font-size: 13px;
}

.xml-schema-confirm-modal .btn-modal-confirm:hover {
  background-color: #ff9f40;
  border-color: #ff9f40;
}

.xml-schema-confirm-modal .btn-modal-cancel {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
  font-weight: 500;
  min-width: 120px;
  font-size: 13px;
}

.xml-schema-confirm-modal .btn-modal-cancel:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* Clean scrollbar styling */
.xml-schema-confirm-modal .modal-body::-webkit-scrollbar {
  width: 6px;
}

.xml-schema-confirm-modal .modal-body::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 3px;
}

.xml-schema-confirm-modal .modal-body::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 3px;
}

.xml-schema-confirm-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #ced4da;
}

/* === END XML SCHEMA BUILDER CONFIRM MODAL === */

/* ========================================= */
/* ===== COMPREHENSIVE DARK THEME SUPPORT ==== */
/* ========================================= */

/* Dark theme for all table elements */
[data-theme="dark"] .custom-editor-modal tbody tr:hover {
  background-color: var(--theme-bg-tertiary);
}

[data-theme="dark"] .custom-editor-modal tbody tr.selected {
  background-color: rgba(255, 111, 0, 0.2);
  color: var(--theme-text-primary);
}

/* Dark theme for modal actions and buttons */
[data-theme="dark"] .custom-editor-modal .modal-actions {
  background-color: var(--theme-bg-secondary);
  border-top-color: var(--theme-border-color);
}

[data-theme="dark"] .custom-editor-modal .btn-modal-cancel {
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .btn-modal-cancel:hover {
  background-color: var(--theme-bg-secondary);
}

[data-theme="dark"] .custom-editor-modal .btn-modal-primary,
[data-theme="dark"] .custom-editor-modal .btn-modal-confirm {
  background-color: var(--bizuit-orange);
  border-color: var(--bizuit-orange);
  color: white;
}

[data-theme="dark"] .custom-editor-modal .btn-modal-primary:hover,
[data-theme="dark"] .custom-editor-modal .btn-modal-confirm:hover {
  background-color: var(--bizuit-orange-dark);
  border-color: var(--bizuit-orange-dark);
}

/* Dark theme for form elements */
[data-theme="dark"] .custom-editor-modal select,
[data-theme="dark"] .custom-editor-modal textarea,
[data-theme="dark"] .custom-editor-modal input[type="text"],
[data-theme="dark"] .custom-editor-modal input[type="number"],
[data-theme="dark"] .custom-editor-modal input[type="email"],
[data-theme="dark"] .custom-editor-modal input[type="password"],
[data-theme="dark"] .custom-editor-modal input:not([type]) {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal select:focus,
[data-theme="dark"] .custom-editor-modal textarea:focus,
[data-theme="dark"] .custom-editor-modal input:focus {
  background-color: var(--theme-bg-secondary);
  border-color: var(--bizuit-orange);
  color: var(--theme-text-primary);
  box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.2);
}

/* Dark theme for XML schema builder and other specialized modals */
[data-theme="dark"] .xml-confirmation-message {
  color: var(--theme-text-primary);
}

[data-theme="dark"] .xml-schema-confirm-modal .modal-body::-webkit-scrollbar-track {
  background: var(--theme-bg-secondary);
}

[data-theme="dark"] .xml-schema-confirm-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--theme-border-color);
}

[data-theme="dark"] .xml-schema-confirm-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--theme-border-light);
}

/* Dark theme for service type selector and specialized modals */
[data-theme="dark"] .service-type-option {
  background: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .service-type-option:hover {
  background: var(--theme-bg-tertiary);
  border-color: var(--bizuit-orange);
}

[data-theme="dark"] .service-type-option.selected {
  background: rgba(255, 111, 0, 0.1);
  border-color: var(--bizuit-orange);
}

/* Dark theme for modal overlays */
[data-theme="dark"] .custom-editor-modal .modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Dark theme for toggle switches in modals */
[data-theme="dark"] .custom-editor-modal .slider {
  background-color: var(--theme-bg-tertiary);
}

[data-theme="dark"] .custom-editor-modal input:checked + .slider {
  background-color: var(--bizuit-orange);
}

/* Dark theme for help text and small elements */
[data-theme="dark"] .custom-editor-modal .form-help,
[data-theme="dark"] .custom-editor-modal small {
  color: var(--theme-text-secondary);
}

/* Dark theme for advanced HTML editor if present */
[data-theme="dark"] .custom-editor-modal .advanced-html-editor {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .advanced-toolbar {
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border-color);
}

[data-theme="dark"] .custom-editor-modal .toolbar-btn {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .custom-editor-modal .toolbar-btn:hover {
  background-color: var(--bizuit-orange);
  color: white;
}

/* ========================================= */
/* ===== END DARK THEME SUPPORT ===== */
/* ========================================= */

/* ========================================= */
/* ===== SHARE PROCESS MODAL STYLES ===== */
/* ========================================= */

/* Container for add permission section */
.share-add-permission-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
}

/* Share modal select elements */
.share-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  background-color: white;
  color: #333;
  flex: 1;
  min-width: 120px;
}

/* Dark theme for share selects */
[data-theme="dark"] .share-select {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

/* Ensure button stays in container */
.share-add-permission-container .btn-modal-confirm {
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .share-add-permission-container {
    flex-direction: column;
    gap: 8px;
  }
  
  .share-select {
    width: 100%;
  }
  
  .share-add-permission-container .btn-modal-confirm {
    width: 100%;
  }
}

/* ========================================= */
/* ===== END SHARE PROCESS MODAL STYLES ===== */
/* ========================================= */

/* ========================================= */
/* ===== SUCCESS ANIMATION MODAL STYLES ===== */
/* ========================================= */

.success-animation-modal {
  max-width: 550px !important;
  text-align: center;
  padding: 50px !important;
  animation: modalSlideIn 0.3s ease-out;
}

/* Contenedor del checkmark animado */
.success-checkmark-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 35px;
  background: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.4s ease-out;
}

/* SVG del checkmark */
.success-checkmark {
  width: 60%;
  height: 60%;
}

/* Círculo del checkmark */
.checkmark-circle {
  stroke: none;
  fill: none;
}

/* Check del checkmark */
.checkmark-check {
  stroke: white !important;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeCheckAnimation 0.5s 0.3s ease-in-out forwards;
}

/* Efecto ripple */
.success-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #4CAF50;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: rippleEffect 1.5s 0.8s ease-out;
}

/* Título del modal */
.success-title {
  color: #2e7d32;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  animation: fadeInUp 0.5s 0.4s ease-out both;
}

/* Contenedor de badges */
.success-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 20px 25px 20px;
  flex-wrap: wrap;
}

/* Badges individuales */
.success-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  animation: badgePopIn 0.4s ease-out both;
}

.success-badge.automated {
  background: #667eea;
  color: white;
  animation-delay: 0.5s;
}

.success-badge.compiled {
  background: #5e9fed;
  color: white;
  animation-delay: 0.6s;
}

.success-badge.ready {
  background: #4facfe;
  color: white;
  animation-delay: 0.7s;
}

/* Descripción */
.success-description {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 15px 30px 15px;
  animation: fadeInUp 0.5s 0.8s ease-out both;
}

/* Detalles */
.success-details {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 25px 20px;
  margin: 0 20px 35px 20px;
  animation: fadeInUp 0.5s 0.9s ease-out both;
}

.success-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: #555;
  font-size: 14px;
}

.success-detail-item i {
  color: #4CAF50;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.success-detail-item:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
}

/* Botón de cerrar */
.success-close-btn {
  background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);
  color: white;
  border: none;
  padding: 12px 35px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s 1s ease-out both;
}

.success-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 111, 0, 0.3);
  background: linear-gradient(135deg, #e65f00 0%, #ff6f00 100%);
}

/* Animaciones */
@keyframes strokeAnimation {
  from {
    stroke-dasharray: 0 160;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 160 160;
    stroke-dashoffset: 0;
  }
}

@keyframes strokeCheckAnimation {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rippleEffect {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes badgePopIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================= */
/* ===== END SUCCESS ANIMATION MODAL STYLES ===== */
/* ========================================= */