/* public/styles.css */


body.loading {
    overflow: hidden;
}


/* Grayscale palette */
:root {
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--gray-100);
  color: var(--gray-900);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow:hidden;
  font-size: 12px;
}

.container-fluid {
  height: 100%;
}

/* Header */
header {
  background-color: var(--gray-800) !important;
  color: var(--gray-100) !important;
}

/* Sidebar & Panels */
.border-end,
.border-start {
  border-color: var(--gray-300) !important;
}
.col-md-3,
.col-md-6 {
  background-color: var(--gray-100);
}

/* Table */
table {
  background-color:  #ffffff;
  border: 1px solid var(--gray-300);
}
table thead {
  background-color: var(--gray-200);
}
table th,
table td {
  vertical-align: middle;
}
.table-sm th,
.table-sm td {
  padding: 0.5rem;
}

/* Left-panel table font size (smaller) */
#diagramTableBody th,
#diagramTableBody td {
  font-size: 0.75rem;
}

/* Links in table */
#diagramTableBody a {
  color: var(--gray-800);
  text-decoration: none;
  font-weight: 400;
}
#diagramTableBody a:hover {
  text-decoration: underline;
  color: var(--gray-900);
}

/* Pagination */
.pagination .page-link {
  color: var(--gray-700);
}
.pagination .page-item.active .page-link {
  background-color: var(--gray-500);
  border-color: var(--gray-500);
  color: #ffffff;
}

/* Forms */
input,
select {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
}
input:focus,
select:focus {
  border-color: var(--gray-600);
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

/* Buttons */
.btn-primary {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}

.btn-success {
  background-color: var(--gray-600);
  border-color: var(--gray-600);
  color: #ffffff;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
}

.btn-secondary {
  background-color: var(--gray-500);
  border-color: var(--gray-500);
  color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--gray-600);
  border-color: var(--gray-600);
}

.btn-warning {
  background-color: var(--gray-400);
  border-color: var(--gray-400);
  color: var(--gray-900);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--gray-500);
  border-color: var(--gray-500);
}

.btn-danger {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
  color: #ffffff;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}

.btn-outline-light {
  color: var(--gray-200);
  border-color: var(--gray-400);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--gray-600);
  border-color: var(--gray-600);
  color: #ffffff;
}


/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--gray-200);
}
::-webkit-scrollbar-thumb {
  background-color: var(--gray-500);
  border-radius: 4px;
}

/* Utility */
.d-flex {
  display: flex !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.overflow-auto {
  overflow: auto !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.g-0 {
  gap: 0 !important;
}

#leftPanel {
  transition: width 0.25s ease, padding 0.25s ease;
  width: 300px; height: 100%;
   position: absolute;left: 0;  z-index: 2;
}

#rightPanel {
  transition: width 0.25s ease, padding 0.25s ease;
  width: 300px;height: 100%;
}

#shape-toolbox {
  transition: width 0.25s ease, padding 0.25s ease;
  width: 300px; height: 100%; 
}

/* colapsado ⇒ ancho 0 y sin padding (ni borde perceptible) */
#shape-toolbox.collapsed,
#leftPanel.collapsed,
#rightPanel.collapsed {
  width:   0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* elimina borde cuando está colapsado */
#leftPanel.collapsed { border-right: none !important; }
#rightPanel.collapsed{ border-left:  none !important; }
#shape-toolbox.collapsed{ border-left:  none !important; }

 

#centerPanel {
  flex: 1 1 auto !important;  /* crece y encoge según el espacio libre */
  min-width: 0;               /* permite overflow horizontal del canvas */
  min-height: 0;
  transition: flex-basis .25s ease;
  outline: none;
  border: none;
  overflow:none;
}
 

.prop-flex{
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* .prop-flex .prop-val{ flex:1 1 auto; } */


.container {
  width: 100%;
  height: 100vh;
  display: flex;
}

.central-left-panel {
  background-color: #f0f0f0;
  padding: 0px;
  display: flex;
  gap: 10px;
  width: 100%;
  height:50%;
  flex:1;
  position: relative;
}

 

 .custom-accordion-header {
  width: 100%;
  padding: 10px;
  background: #767678;
  color: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
}


.accordion-shapes{
  overflow-y: auto;
/*   max-height: 600px; */
  width: 200px;
}


.contenedor {
  width: 600px;
  height: 400px;
  border: 2px solid #000;
  overflow: auto;
}

canvas {
  display: block;
}




/* public/css/style.css */
.node-row.selected {
  background-color: #d0e7ff; /* color de selección */
}
.node-row {
  /* ajuste visual; no es obligatorio */
  gap: 8px;
}

  
#editor-container {
    position: absolute;
    display: none; /* oculto inicialmente */
    background: white;
    border: 1px solid #ccc;
    z-index: 10;
}
#editor {
    height: 100px;
    width: 200px;
}

.no-select {
  user-select: none;        /* Estándar */
  -webkit-user-select: none; /* Safari y navegadores basados en WebKit */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge antiguo */
   user-select: none;
  cursor: all-scroll;
   pointer-events: none;
}


.ql-font-sans {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font-serif {
  font-family: Georgia, "Times New Roman", serif;
}
.ql-font-monospace {
  font-family: "Courier New", monospace;
}

.ql-size-small {
  font-size: 12px;
}
.ql-size-large {
  font-size: 24px;
}
.ql-size-huge {
  font-size: 32px;
}



.container-panels {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.top-panel {
  background: #f8f9fa;
  min-height: 100px;
  max-height: 80%;
  height: 40%;
  overflow: auto;
}
 
.bottom-panel {
  background: #6c757d;
  color: white;
  flex-grow: 1;
  overflow: auto;
}
 
 
.text-editor-readonly{
  pointer-events: none; 
  font-family: Arial; 
  color: black ;
  font-size:12px;
  font-weight: normal;
  text-align: center
}

.text-editor-editable{
  pointer-events: auto;
  font-family: Arial;
  color: black ;
  font-size:12px;
  font-weight: normal;
  cursor:text;
  text-align: center
}


.text-editor-readonly-no-default-enter{
  pointer-events: none; 
  font-family: Arial; 
  color: black ;
  font-size:12px;
  font-weight: normal;
  white-space: pre; 
  display: inline-block;
}
 
.text-editor-editable-no-default-enter{
  pointer-events: auto;
  font-family: Arial;
  color: black ;
  font-size:12px;
  font-weight: normal;
  cursor:text;
  white-space: pre; 
}

/* .editor-text-button {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
 
}
.editor-text-button:focus  {
  border-color: var(--gray-600);
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}
 */

.text-editor-button.active {
  background-color:#e0e0e0;
}

.text-editor-button {
  background-color: var(--gray-100);
}

 
.figure-div {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #000;
  text-align: center;
  pointer-events: none; /* 👈 No bloquea el canvas */
  transform-origin: center center;
}

/* .text-editor {
  display: inline-block;    
  white-space: pre-wrap;        
  min-width: 50px;         
  padding: 4px 6px;
  border: 1px solid transparent;
  vertical-align: top;    
}

.text-editor:focus {
  outline: none;
  border: 1px dashed #333;
} */

/* .text-editor {
  position: absolute;
  border: 2px dashed #007bff;
  background: #ffffff;
  resize: both;
  overflow: auto;
  padding: 4px;
  font-family: sans-serif;
  font-size: 16px;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.text-editor::-webkit-scrollbar {
  display: none;
}
 */

#contenedor-principal {
  width: 80%;  
  position: relative;
}

#toDesktop{
  display: block;  
}

#toMobile{
  display: none;  
}
 

@media (max-width: 767px) { /* Puedes ajustar el ancho a tu necesidad */
  #toDesktop{
    display: none;  
  }
  #toMobile{
    display: block;  
  }
}

.contenedor-principal-style{
  display:flex;   width: 80%;max-height: 100vh;  justify-content: center; align-items: top  ; 

}
 

#projectPanel {
  position: absolute; /* o 'fixed' si quieres que siga visible al hacer scroll */
  top: 84px;          /* distancia desde la parte superior de la página o contenedor relativo */
  left: 0px;         /* distancia desde la izquierda */
  
  height: 100vh;
  background-color: --gray-100;
  z-index: 1000;      /* asegura que quede por encima de otros elementos */
  padding: 10px;
  color: --gray-100;
}


  /* Divisores */
  .divider {
  
    top: 0;
    width: 16px;
    height: 10%;
    background-color: #777;
    cursor: ew-resize;
    z-index: 3;
  }

  .shape-container{
    text-align: center;
  }



  #main-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  #editor-row { flex: 1; display: flex; overflow: hidden; }
  .tabs-container { height: 5vh; overflow: auto; border-top: 1px solid #ccc; flex-shrink: 0; }
  #left-panel, #right-panel { flex-shrink: 0; width: 16%; min-width: 160px; } /* min-width para UX */
  .panel { border: 1px solid #ccc; overflow: hidden; }
  #canvas-container { flex: 1; display: flex; justify-content: center;   overflow: auto; margin-top: 10px; }
  #canvas-wrapper { padding: 40px; background-color: white; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
  .hidden { display: none !important; }