* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.draw2d_InputPort{
	fill:#F7F7F7;
	stroke:#d7d7d7;
 }
 .draw2d_OutputPort{
	fill:#F7F7F7;
	stroke:#d7d7d7;
 }

#canvas-parent {
	height: 100%;   /* hereda los 78vh de #etl-body */
	flex: 1;
	min-width: 0;
	position: relative;
	overflow: scroll;
	background-color: #fff;
}

#canvas-etl{
	width: 6000px;
	height: 6000px;
}

#schema-calculator{
	list-style-type: none;
	width: 31%;
	background-color: #cac5c5;
	position: fixed;
	height: 29%;
	overflow: auto;
	cursor: pointer;
}

#functions-calculator{
	list-style-type: none;
	width: 31%;
	background-color: #cac5c5;
	position: fixed;
	height: 39%;
	overflow: auto;
	cursor: pointer;
}

#functions-string{
	list-style-type: none;
	width: 31%;
	background-color: #cac5c5;
	position: fixed;
	height: 39%;
	overflow: auto;
	cursor: pointer;
}



#attrs-execute-sql{
	list-style-type: none;
	width: 42%;
	background-color: #f1f1f1;
	position: fixed;
	height: 20%;
	overflow: auto;
	cursor: pointer;
}

#attrs-values{
	list-style-type: none;
	width: 42%;
	background-color: #f1f1f1;
	position: fixed;
	height: 20%;
	overflow: auto;
	cursor: pointer;
}

.right {
	float: right;
	width: 300px;
	padding: 10px;
  }

#icon-success{
	color: green
}

#icon-error{
	color: red
}

.palette_node_element {
	
	cursor: move;
	padding-left: 10px;

}

.column10
{
    float: left;
    width: 10%;
}

.column20
{
    float: left;
    width: 20%;
}

.column25
{
    float: left;
    width: 25%;
}

.column30
{
    float: left;
    width: 30%;
}


.column33
{
    float: left;
    width: 33%;
}

.column40
{
    float: left;
    width: 40%;
}
.column50
{
    float: left;
    width: 50%;
}

.column60
{
    float: left;
    width: 60%;
}

.column66
{
    float: left;
    width: 66%;
}

.column80
{
    float: left;
    width: 80%;
}

.column90
{
    float: left;
    width: 90%;
}

.btn-creator {
	color: #ffffff !important;
	background-color: #b295e4 !important;
	border-color: #aa87e7;
}

.disabled {
    pointer-events: none;
}


/* ===================================================================
   gvSIG Online — UI refinements para plugin_geoetl
   Iguala el estilo visual del core (project_list, application_list…)
   ================================================================= */

/* ---- Variables de color compartidas ---- */
:root {
  --pl-accent:     #4a7fa5;
  --pl-accent-dk:  #2d5f80;
  --pl-text:       #2e3a45;
  --pl-muted:      #7b8a96;
  --pl-border:     #e8ecef;
  --pl-bg:         #f4f6f8;
  --pl-white:      #ffffff;
  --pl-radius:     10px;
  --pl-shadow:     0 2px 12px rgba(0,0,0,0.08);
  --pl-transition: 0.2s ease;
}

/* ---- Panel principal (pl-panel) ---- */
.pl-panel {
  background: var(--pl-white);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  border: 1px solid var(--pl-border);
  /* sin overflow:hidden para que los dropdowns sean visibles */
}
.pl-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pl-border);
  gap: 12px;
  flex-wrap: wrap;
  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
  background: var(--pl-white);
}
.pl-panel__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pl-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pl-panel__title i { color: var(--pl-accent); }
.pl-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pl-panel__body { padding: 0; }

/* ---- Segunda fila: paleta de nodos ETL ---- */
.pl-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--pl-border);
  background: var(--pl-bg);
  flex-wrap: wrap;
  position: relative;
  z-index: 200;
}
/* Los dropdowns de la paleta deben sobrepasar el canvas */
.pl-panel__toolbar .dropdown-menu {
  z-index: 9999 !important;
  position: absolute;
}
/* Botones de la paleta ETL — todos en estilo outline */
.pl-panel__toolbar .btn {
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--pl-white) !important;
  transition: background var(--pl-transition), border-color var(--pl-transition), color var(--pl-transition);
}
/* Inputs — outline verde */
.pl-panel__toolbar .btn-success {
  border: 1px solid #27ae60 !important;
  color: #27ae60 !important;
}
.pl-panel__toolbar .btn-success:hover {
  background: #f0faf4 !important;
  border-color: #219a52 !important;
  color: #219a52 !important;
}
/* Creators — outline morado */
.pl-panel__toolbar .btn-creator {
  border: 1px solid #8e6bbf !important;
  color: #8e6bbf !important;
}
.pl-panel__toolbar .btn-creator:hover {
  background: #f5f0fb !important;
  border-color: #7a5aad !important;
  color: #7a5aad !important;
}
/* Transformers — outline azul */
.pl-panel__toolbar .btn-primary {
  border: 1px solid var(--pl-accent) !important;
  color: var(--pl-accent) !important;
}
.pl-panel__toolbar .btn-primary:hover {
  background: #f0f6fb !important;
  border-color: var(--pl-accent-dk) !important;
  color: var(--pl-accent-dk) !important;
}
/* Outputs — outline naranja */
.pl-panel__toolbar .btn-warning {
  border: 1px solid #e67e22 !important;
  color: #e67e22 !important;
}
.pl-panel__toolbar .btn-warning:hover {
  background: #fdf3e7 !important;
  border-color: #ca6f1e !important;
  color: #ca6f1e !important;
}
.pl-panel__toolbar .dropdown-item {
  font-size: 13px;
  padding: 7px 16px;
  color: var(--pl-text);
  white-space: nowrap;
}
.pl-panel__toolbar .dropdown-item:hover {
  background: #f0f6fb;
  color: var(--pl-accent);
}

/* ---- Botón acción principal (azul) ---- */
.btn-pl-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pl-accent);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  height: 34px;
  cursor: pointer;
  transition: background var(--pl-transition);
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.btn-pl-add:hover { background: var(--pl-accent-dk); }

/* ---- Botón default refinado ---- */
.btn-default {
  background: var(--pl-white);
  border: 1px solid var(--pl-border);
  color: var(--pl-muted);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: background var(--pl-transition), border-color var(--pl-transition), color var(--pl-transition);
}
.btn-default:hover,
.btn-default:focus {
  background: var(--pl-bg);
  border-color: var(--pl-accent);
  color: var(--pl-accent);
}

/* ---- Tabla pl-table (igual que core) ---- */
.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.pl-table thead th {
  background: var(--pl-bg);
  color: var(--pl-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--pl-border);
  white-space: nowrap;
}
.pl-table tbody tr {
  border-bottom: 1px solid var(--pl-border);
  transition: background var(--pl-transition);
}
.pl-table tbody tr:last-child { border-bottom: none; }
.pl-table tbody tr:hover { background: #f0f6fb; }
.pl-table tbody td {
  padding: 11px 16px;
  color: #4a5a68;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
}
/* Primera columna (ID) más tenue */
.pl-table tbody td:first-child {
  color: var(--pl-muted);
  font-size: 12px;
}
/* Columna nombre en negrita (col 5 en etl-table: ID, icono, Estado, Último, Nombre) */
#etl-table tbody td:nth-child(5) {
  font-weight: 600;
  color: #2e3a45;
}
.pl-table tbody td .btn {
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
}

/* ---- Hover en tablas genéricas .table también ---- */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
  background-color: #f0f6fb;
}

/* ---- Cabecera de tabla genérica refinada ---- */
.table > thead > tr > th {
  background: var(--pl-bg);
  color: var(--pl-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 11px 16px;
  border-bottom: 2px solid var(--pl-border) !important;
  white-space: nowrap;
}

/* ---- Celdas de cuerpo de tabla genérica ---- */
.table > tbody > tr > td {
  padding: 11px 16px;
  color: #4a5a68;
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
  border-top: 1px solid var(--pl-border) !important;
}

/* ---- Botones de acción en filas de tabla ---- */
.pl-table .btn-danger,
#etl-table .btn-danger {
  background: transparent;
  border: 1px solid #e8bebe;
  color: #c0392b;
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
  transition: background var(--pl-transition), color var(--pl-transition);
}
.pl-table .btn-danger:hover,
#etl-table .btn-danger:hover {
  background: #fde8e8;
  border-color: #c0392b;
  color: #c0392b;
}
.pl-table .btn-success,
#etl-table .btn-success {
  background: transparent;
  border: 1px solid var(--pl-border);
  color: var(--pl-accent);
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
  transition: background var(--pl-transition), color var(--pl-transition);
}
.pl-table .btn-success:hover,
#etl-table .btn-success:hover {
  background: #f0f6fb;
  border-color: var(--pl-accent);
  color: var(--pl-accent-dk);
}
.pl-table .btn-warning,
#etl-table .btn-warning {
  background: transparent;
  border: 1px solid #e8d8a0;
  color: #9a6c00;
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
  transition: background var(--pl-transition), color var(--pl-transition);
}
.pl-table .btn-warning:hover,
#etl-table .btn-warning:hover {
  background: #fff8e6;
  border-color: #9a6c00;
  color: #7a5600;
}
.pl-table .btn-primary,
#etl-table .btn-primary {
  background: transparent;
  border: 1px solid var(--pl-border);
  color: var(--pl-muted);
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
}
.pl-table .btn-info,
#etl-table .btn-info {
  background: transparent;
  border: 1px solid #b0d0e8;
  color: #2471a3;
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
  transition: background var(--pl-transition), color var(--pl-transition);
}
.pl-table .btn-info:hover,
#etl-table .btn-info:hover {
  background: #eaf4fb;
  border-color: #2471a3;
  color: #1a5276;
}
.pl-table .btn-light,
#etl-table .btn-light {
  background: transparent;
  border: 1px solid var(--pl-border);
  color: var(--pl-muted);
  border-radius: 5px;
  font-size: 12px;
  padding: 4px 10px;
}

/* ---- DataTables: neutralizar bordes por defecto ---- */
table.dataTable {
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid var(--pl-border) !important;
}
table.dataTable.no-footer {
  border-bottom: none !important;
}

/* ---- DataTables: buscador ---- */
.dataTables_wrapper {
  padding: 0;
}
.dataTables_wrapper .dataTables_filter {
  padding: 12px 16px 0;
  text-align: right;
}
.dataTables_wrapper .dataTables_filter label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pl-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.dataTables_wrapper .dataTables_filter input {
  height: 32px;
  border-radius: 20px;
  border: 1px solid var(--pl-border);
  background: var(--pl-bg);
  font-size: 12px;
  padding: 0 12px;
  width: 180px;
  transition: border-color var(--pl-transition), box-shadow var(--pl-transition);
  box-shadow: none;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--pl-accent);
  background: var(--pl-white);
  box-shadow: 0 0 0 3px rgba(74,127,165,0.12);
}

/* ---- DataTables: registros por página ---- */
.dataTables_wrapper .dataTables_length {
  padding: 12px 16px 0;
  font-size: 12px;
  color: var(--pl-muted);
}
.dataTables_wrapper .dataTables_length select {
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--pl-border);
  background: var(--pl-bg);
  font-size: 12px;
  padding: 0 6px;
  color: var(--pl-text);
}

/* ---- DataTables: info ---- */
.dataTables_wrapper .dataTables_info {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--pl-muted);
  border-top: 1px solid var(--pl-border);
}

/* ---- DataTables: paginación ---- */
.dataTables_wrapper .dataTables_paginate {
  padding: 8px 16px;
  border-top: 1px solid var(--pl-border);
  text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  margin: 0 2px;
  border-radius: 5px;
  border: 1px solid var(--pl-border) !important;
  background: var(--pl-white) !important;
  color: var(--pl-muted) !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pl-transition), border-color var(--pl-transition), color var(--pl-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f0f6fb !important;
  border-color: var(--pl-accent) !important;
  color: var(--pl-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--pl-accent) !important;
  border-color: var(--pl-accent) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--pl-bg) !important;
  border-color: var(--pl-border) !important;
  color: #ccc !important;
  cursor: default;
}

/* ---- Modales refinados ---- */
.modal-content {
  border-radius: var(--pl-radius);
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-header {
  border-bottom: 1px solid var(--pl-border);
  padding: 16px 20px;
  background: var(--pl-white);
  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
}
.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pl-text);
}
.modal-body label,
.modal-body .col-form-label {
  color: var(--pl-text);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-body {
  padding: 20px;
  font-size: 13px;
  color: var(--pl-text);
  max-height: calc(80vh - 130px);
  overflow-y: auto;
}
/* Alinear columnas por la parte inferior: botón siempre al nivel del input */
.modal-body .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 0;
}
.modal-body .row > [class*="col-"] {
  float: none;
  box-sizing: border-box;
}



.modal-footer {
  border-top: 1px solid var(--pl-border);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-footer .btn {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
}
.modal-footer .btn-default {
  border-color: var(--pl-border);
  color: var(--pl-muted);
}
.modal-footer .btn-primary {
  background: var(--pl-accent);
  border-color: var(--pl-accent);
  color: #fff;
}
.modal-footer .btn-primary:hover {
  background: var(--pl-accent-dk);
  border-color: var(--pl-accent-dk);
}
.modal-footer .btn-danger {
  background: transparent;
  border: 1px solid #e8bebe;
  color: #c0392b;
  transition: background var(--pl-transition), color var(--pl-transition);
}
.modal-footer .btn-danger:hover {
  background: #fde8e8;
  border-color: #c0392b;
}

/* ---- Botón "back" (Workspaces) en el header ---- */
#toolbar-button-back {
  background: var(--pl-white) !important;
  color: var(--pl-muted) !important;
  border: 1px solid var(--pl-border) !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--pl-transition), border-color var(--pl-transition), color var(--pl-transition);
}
#toolbar-button-back:hover {
  background: var(--pl-bg) !important;
  border-color: var(--pl-accent) !important;
  color: var(--pl-accent) !important;
}
/* Canvas: está fuera del pl-panel, solo necesita fondo */
#canvas-parent {
  background: #fff;
}