/* Estilos base */
.editor-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 128px);
}

/* Componentes */
.component-container {
  margin: 8px 0;
  padding: 8px;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

/* Filas y columnas */
.row-wrapper {
  margin-bottom: 16px;
  padding: 12px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.editor-row {
  min-height: 80px;
  margin: 0 -4px;
}

.col-content {
  position: relative;
  min-height: 60px;
  padding: 8px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  background-color: #fafafa;
}

/* Selección */
.selected {
  outline: 2px solid #1976D2;
  background-color: rgba(25, 118, 210, 0.05);
}

.selected-col {
  outline: 2px solid #4CAF50;
}

.selected-component {
  outline: 2px solid #FF9800;
}

/* Botones de acción */
.add-component-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  background: white !important;
  border: 1px solid #ddd;
}

.add-col-btn {
  margin-top: 8px;
}

/* Previsualización de layouts */
.layout-preview {
  display: flex;
  width: 80px;
  height: 16px;
  margin-left: 8px;
  border: 1px solid #ddd;
}

.preview-col {
  height: 100%;
  background-color: #1976D2;
  opacity: 0.6;
  margin-right: 1px;
}

.preview-col:last-child {
  margin-right: 0;
}

/* Contenedores especiales */
.standalone-components {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.add-row-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.property-panel {
  border-top: 1px solid #ddd;
  padding: 0;
}